Vue + ElementUI快速构建项目

我会带着你远行 2024-03-29 16:06 16阅读 0赞

我们采用实战教学模式并结合 ElementUI 组件库，将所学知识点应用到实际中，以最快速度带领大家掌握 Vue 的使用。

### 创建工程 ###

注意：命令行要使用管理员模式运行

1.  创建一个名为 hello-vue 的工程

vue init webpack hello-vue

1.  安装依赖，我们需要安装 vue-router、element-ui、sass-loader 和 node-sass 四个插件

# 进入工程目录
    cd hello-vue
    # 安装 vue-router
    npm install vue-router --save-dev
    # 安装element-ui
    npm i element-ui -s
    # 安装依赖
    npm install
    # 安装 SASS 加载器
    npm install sass-loader node-sass --save-dev
    # 启动测试
    npm run dev

1.  Npm命令解释

*  npm install moduleName：安装模块到项目目录下

*  npm install -g moduleName：-g 的意思是将模块安装到全局，具体安装到磁盘哪个文章，要看 npm config prefix 的位置

*  npm install --save moduleName：--save 的意思是将模块安装到项目目录下，并在package文件的 dependencies 节点写入依赖，-S 为该命令的缩写

*  npm install --save-dev moduleName：--save-dev 的意思是将模块安装到项目目录下，并在package文件的 devDependencies 节点写入依赖，-D为该命令的缩写

附加：npm config prefix 配置操作

npm config set prefix “D:\nodejs\node_global” //设置全局包目录
    npm config set cache “D:\nodejs\node_cache” //设置缓存目录
    npm config list //查看基本配置
    npm config list -l //查看所有配置
    
    npm本地安装与全局安装有什么区别？
    npm install grunt // 本地安装，则是将模块下载到当前命令行所在目录。
    npm install -g grunt//全局安装，模块将被下载安装到【全局目录】中；
    
    npm如何获取全局安装的默认目录？
    npm config get prefix
    
    npm如何设置全局安装的默认目录？
    npm config set prefix “directory”

### 集成ElementUI组件 ###

进入elementui官网，自选组件拷贝到项目中即可。