vue 脚手架搭建新项目以及element-ui等vue组件的使用

vue快速搭建项目（前提是你的电脑已经安装了node的环境和vue脚手架安装，不会的自行百度）

　　1：打开终端：

　　　　

　　这里说下此时位置是在User下的lijuntao文件夹下面，我通常会在桌面新建一个文件夹而后进去在执行下一步，若是你也想在桌面新建的话，就

　　　　就在终端里面输入cd desktop摁回车就进到桌面了

　　　　

　　　　，而后再cd 文件夹名字

　　　　

　　　　

2: 输入命令vue init webpack-simple vueElemente 回车

　　　　

　　　　此时你就在文件夹vueElement里面新建了一个名字叫 elm_dome的vue项目

　　　　项目描述是 A Vue.js project（能够本身规定）

　　　　做者是lijuntao（可本身规定）

　　　　不用sass这个你本身选择可用可不用

　　　　还有一种新建项目的方法

　　　　vue init webpack vueElement 回车（这个通常对应比较大的项目工程，你能够两个都试试看有什么不用）

3：按上面提示作：

　　　　cd vueElement  回车

　　　　npm install ( 我使用的是cnpm install， 两种同样，这个是淘宝镜像方法，由于比较快，不懂的自行百度）

　　　　

　　上图就是正在下载项目项目所需的依赖，

　　下图是成功后的样子：

　　　　

　4：启动项目

　　　　npm run dev 回车

　　　　

　　　　这样就新建新建了一个vue项目 端口是8080，后期项目多了可能须要更改端口，

　　　　如何改端口？

　　　　进入到文件夹 vueElement里面找到 package.json文件

　　　　

　　　　在以下位置添加 - - port 8023 

　　　　　

　　而后回到终端重启项目

　　　　ctrl +c

　　　　npm run dev

　　　　

　　　　

　　端口是8023

使用element-ui组件　

　　http://element.eleme.io/#/zh-CN/component/upload文档位置

回到终端：

　　npm i element-ui -S    至关于 npm install element- ui --save  (推荐使用淘宝镜像方法，由于快）

　　

　　再打开你的package.json文件，有以下变化

　　

　　看文档的快速上手   地址：http://element.eleme.io/#/zh-CN/component/quickstart

　　

　　　对比本身的package.json文件就可看出，本身文件里面少了一个style-loader，因此就要去配置

　　　命令：

　　　　cnpm  i  style-loader -D 回车

　　　　

　　　在打开你的package.json 你会发现多了个style-loader

　　　　

　　而后配置你的webpack.config.js文件

　　　　

　　　　其实就是把这一部分补到你的webpack.config.js文件里面的相应位置，

　　　　简单一句话，对比人家的和你本身的缺什么补什么，直接复制粘贴过去，

　　　而后就是引用element-ui

　　　　配置mian.js文件

　　　　也是直接对比你的mian.js文件和人家的，缺什么补什么，复制粘贴过去

　　　而后直接看文档例子用　　

　　　　找到你的文件夹里面的app.vue文件

　　　　　　更改代码

　　　　　　如图

　　　　　　　　

　　　　

　　　　　　而后回到终端

　　　　　　　　npm run dev

　　　　　　　从新运行项目

　　　　　　　　效果图以下

　　　　　　　　　　　　

 

这里只是用了element-ui里面的一个button按钮，其余组件请自行看文档实验；