搭建VUE脚手架 + 引入element-ui

转载路径：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前需安装修改的配置：

1. 安装 loader 模块：
   cnpm install style-loader -D
   cnpm install css-loader -D
   cnpm install file-loader -D

2. 安装 Element-UI 模块
   cnpm install element-ui --save

3. 修改 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 //配置文件