关于Vue、webpack、vue+ElementUI的配置与问题

关于Vue的配置与常见问题解决方法

1.需要环境

Node.js : http://nodejs.cn/download/

根据系统版本下载(32bit/64bit)新版本会自动配置Path路径,安装页面没有勾选的选项可以不用勾选

确认nodejs安装成功:

cmd 下输入 node -v,查看是否能够正确打印出版本号
cmd 下输入 npm-v,查看是否能够正确打印出版本号(成功安装node,npm会自动安装)

npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。

安装 Node.js 淘宝镜像加速器(cnpm)(可以加快下载,建议最好使用npm)关于Vue、webpack、vue+ElementUI的配置与问题
安装的位置:C:\Users\Administrator\AppData\Roaming\npm
(注:AppData文件夹需在“查看”中选择“隐藏的项目”才可以看到)
关于Vue、webpack、vue+ElementUI的配置与问题

2.安装vue-cli关于Vue、webpack、vue+ElementUI的配置与问题

3.创建一个Vue项目

在自己所要创建项目的文件下创建项目(vue init webpack 项目名)
关于Vue、webpack、vue+ElementUI的配置与问题

vue-router选择yes,其他都选no
关于Vue、webpack、vue+ElementUI的配置与问题
初始化并运行
关于Vue、webpack、vue+ElementUI的配置与问题

4.安装webpack

WebPack 是一款模块加载器兼打包工具,它能把各种资源,如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。
关于Vue、webpack、vue+ElementUI的配置与问题
输入命令查看安装版本
关于Vue、webpack、vue+ElementUI的配置与问题

5.安装vue-router路由

上文创建项目时,第一个选项选择yes就是自动安装vue-router路由
也可通过该命令进行安装

关于Vue、webpack、vue+ElementUI的配置与问题

6.vue+ElementUI

1.创建一个新的Vue工程:hello-vue
关于Vue、webpack、vue+ElementUI的配置与问题
2.安装依赖,我们需要安装 vue-router、element-ui、sass-loader 和node-sass 四个插件
关于Vue、webpack、vue+ElementUI的配置与问题