转载路径：https://segmentfault.com/a/1190000011023102
从新建vue项目到引入组件Element
一、新建项目
1.查看 node是不是已经安装好命令：node -v (没有安装的先安装环境):
https://nodejs.org/en/ node -v
2.查看 npm是不是已经安装好命令：npm -v (没有安装的先安装环境);
3.npm install -g cnpm --registry=https://registry.npm.taobao.org (安装国内的淘宝镜像文件，后面的安装npm可以全部改为cnpm)
4.安装 vue-cli
4.1、cnpm install -g vue
4.2、cnpm install -g vue-cli
5. 安装 webpack cnpm install -g webpack
6.cd 你的运行目录
7.新建vue项目 vue init webpack vuedemo（vuedemo文件路径名）
需要注意的是项目的名称不能大写，不然会报错。
1、Project name (my-project) # 项目名称（我的项目）
2、Project description (A Vue.js project) # 项目描述一个Vue.js 项目
3、Author 作者（你的名字）
4、打包方式（两种打包方式runtime 打包的是 /node_modules/vue/dist/vue.common.js；standalone 打包的是
/node_modules/vue/dist/vue.js 我选择的是默认的）Y
5、Install vue-router? (Y/n) # 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）Y
6、Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码？ （Y [ yes ] / N [ no ]）N
7、Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint（使用箭头键）N
8、Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha？ （Y/ N）N
9、Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试，Nightwatch？ （Y/ N）N
10、Should we run `npm install` for you after the project has been created<recommended>
(1.Yes,use NPM 2. Yes,use Yarn 3. No,I will handle that myself) NPM
8.进入项目目录 cd vuedemo
9.安装vue-resource到项目中 npm install vue-resource （如果没有安装到可以执行这一步）
安装完毕后，在main.js中导入以下内容
import VueResource from ‘vue-resource’
Vue.use(VueResource)
10.安装依赖 cnpm install
11.运行项目 cnpm run dev
12.发布项目 cnpm run build（完成后，就会在项目目录下有多一个dist目录，把dist下的内容就可以放在web服务器上了。）
注：mac电脑需要在安装淘宝镜像前执行： sudo chown -R $USER /usr/local
二、使用element-ui前需安装修改的配置：
-
安装 loader 模块：
cnpm install style-loader -D
cnpm install css-loader -D
cnpm install file-loader -D
-
安装 Element-UI 模块
cnpm install element-ui --save
-
修改 webpack.base.conf.js 的配置（可加可不加）
下面是需添加的代码：
{
test: /\\\\\\\\.css$/,
loader: "style!css"
},
{
test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,
loader: "file"
}
三、引入Element，前面已经全局安装了element-ui，只需要在Vue项目中引入即可
1、打开项目：src/main.js,添加下面三条
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
Vue.use(ElementUI)
四、然后在.vue文件里就直接可以用了
4.1 在router文件下的index中写入路由内容，例如：
login是我的登录页面,path:’/’ 表示浏览器打开时第一个出现的页面
import Vue from 'vue'
import Router from 'vue-router'
import login from '@/components/login'
import main from '@/page/main'
//import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
mode:'history',//去掉使用vue-router后链接中的 “#！”
routes: [
{path: '/',component: login},
{path: '/page',component: main}
]
})
vue页面:例如：做一下修改,加入element-button按钮：
<template>
<div class="login">
<form name = 'form' action="">
<input id="username" type="text" placeholder="请输入手机号码或用户名" />
<input id='pwd' type="password" placeholder="请输入密码" />
<button onclick="login()">登录</button>
</form>
<div class="account">
<p class="forget" style="float:right">忘记密码?</p>
<div class="register">
<span>还没有账号?</span>
<a href="#">手机注册</a>
</div>
</div>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="text">文字按钮</el-button>
</div>
</template>
五、整体项目目录
–build
–config
–dist //npm run build 之后再生成的目录
–src
–components // 存放组件
–page //页面组件，由vue-router引入
–router //路由
–store // 数据流管理
main.js //入口文件
app.vue //主组件
–static //静态文件目录
.babelrc
.gitignore //git忽略上传文件
index.html //静态文件入口
package.json //配置文件
