Vue + ElementUI快速构建项目

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

创建工程

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

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

vue init webpack hello-vue

2. 安装依赖，我们需要安装 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

3. 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官网，自选组件拷贝到项目中即可。