使用vue-cli搭建element-ui项目
最近在使用element-ui搭建项目时发现若只纯用webpack来运行element-ui，要配置各种文件，对于新手来说实在太不友好了，
就想到用vue-cli来搭建整个vue项目
1.安装node.js
2.安装webpack
全局安装 webpack命令
npm install webpack -g
3.安装淘宝镜像【网速快的童鞋可以省略此步】
1 npm install -g cnpm --registry=https://registry.npm.taobao.org
4.vue脚手架全局安装 -- 用于生成vue模板
npm install -g vue-cli
把它理解成让你不需要为编译或其他琐碎的事情而浪费时间，帮助你快速开始一个vue项目，其实其本质就是给你一套文件结构，包含基础的依赖库
5.使用脚手架构建vue项目 -- 一路回车就行了
vue init webpack
6.element-ui安装
npm i element-ui
注意：到此部element-ui只是安装到项目目录下，但还需要在项目文件中配置才能使用，否则直接写入element-ui的组件代码会报错！！【此处新手极易踩巨坑！】
（1），在package.json文件中找到 devDependencies，在括号内追加上"element-ui": "^2.4.6"，如果不知道element的版本，可以在node_modules/element-ui/package.json中查找版本号，
（2），在src/main.js中添加引用element-ui声明
到此，element-ui安装完毕。
7.依赖安装
npm install
8.运行项目
npm run dev
运行成功！
9，添加一个实例
（1），在src/components目录下新建一个Index.vue文件
<template>
<div class="hello" id="">
<h1>{{ msg }}</h1>
<template>
<el-carousel :interval="4000" type="card" height="200px">
<el-carousel-item v-for="item in 6" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
</div>
</template>
<script>
export default {
name: 'index',
data () {
return {
msg: '这是新添加的走马灯文件',
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
.hello{
width: 1200px;
margin: auto;
}
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
（2），修改HelloWorld.vue文件
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<router-link to="index"><h1>{{ btnLin }}</h1></router-link> <!-- router是vue官方路由to="index"是在router/index.js路由文件中跳转到Index.vue文件 -->
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: '测试文件安装是否成功111',
btnLin: '点击我跳转'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
（3），修改路由文件router/index.js
1 import Vue from 'vue'
2 import Router from 'vue-router'
3 import HelloWorld from '@/components/HelloWorld'
4 import Index from '@/components/Index'
5 // import home from '@/components/home/home'
6
7
8 Vue.use(Router)
9
10 export default new Router({
11 routes: [
12 {
13 path: '/',
14 name: 'HelloWorld',
15 component: HelloWorld
16 },
17 {
18 path: '/index',
19 name: 'Index',
20 component: Index
21 }
22 ]
23
24
25 })
（4），ctrl+s保存文件后，页面自动刷新如下
大功告成！！！
├─build # 编译后生成的所有代码、资源（图片、字体等，虽然只是简单的从源目录迁移过来） ├─node_modules # 利用npm管理的所有包及其依赖 ├─vendor # 所有不能用npm管理的第三方库 ├─.babelrc # babel的配置文件 ├─.eslintrc # ESLint的配置文件 ├─index.html # 仅作为重定向使用 ├─package.json # npm的配置文件 ├─webpack-config # 存放分拆后的webpack配置文件 │ ├─base # 主要是存放一些变量 │ ├─inherit # 存放生产环境和开发环境相同的部分，以供继承 │ └─vendor # 存放webpack兼容第三方库所需的配置文件 ├─webpack.config.js # 生产环境的webpack配置文件（无实质内容，仅为组织整理） ├─webpack.dev.config.js # 开发环境的webpack配置文件（无实质内容，仅为组织整理） ├─src # 当前项目的源码 ├─pages # 各个页面独有的部分，如入口文件、只有该页面使用到的css、模板文件等 │ ├─alert # 业务模块 │ │ └─index # 具体页面 │ ├─index # 业务模块 │ │ ├─index # 具体页面 │ │ └─login # 具体页面 │ │ └─templates # 如果一个页面的HTML比较复杂，可以分成多块再拼在一起 │ └─user # 业务模块 │ ├─edit-password # 具体页面 │ └─modify-info # 具体页面 └─public-resource # 各个页面使用到的公共资源 ├─components # 组件，可以是纯HTML，也可以包含js/css/image等，看自己需要 │ ├─footer # 页尾 │ ├─header # 页头 │ ├─side-menu # 侧边栏 │ └─top-nav # 顶部菜单 ├─config # 各种配置文件 ├─iconfont # iconfont的字体文件 ├─imgs # 公用的图片资源 ├─layout # UI布局，组织各个组件拼起来，因应需要可以有不同的布局套路 │ ├─layout # 具体的布局套路 │ └─layout-without-nav # 具体的布局套路 ├─less # less文件，用sass的也可以，又或者是纯css │ ├─base-dir │ ├─components-dir # 如果组件本身不需要js的，那么要加载组件的css比较困难，我建议可以直接用less来加载 │ └─base.less # 组织所有的less文件 ├─libs # 与业务逻辑无关的库都可以放到这里 └─logic # 业务逻辑
