搭建vue开发环境
必须要安装node.js
安装淘宝镜像：
cnpm 下载包的速度更快一些。
地址：http://npm.taobao.org/
安装cnpm: sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
1.搭建vue的开发环境 ，安装vue的脚手架工具
sudo npm install --global vue-cli /sudo cnpm install --global vue-cli （全局安装 vue-cli，此命令只需要执行一次）
2.创建一个基于webpack模板的新项目
sudo vue init webpack vue-demo01
cd vue-demo01
cnpm install / npm install 如果创建项目的时候没有报错，这一步可以省略。如果报错了 cd到项目里面运行 cnpm install / npm install
npm run dev
Vue CLI2升级到Vue CLI3
注意:Vue CLI3是Vue CLI2的升级版本，并不是Vue3.0 。 Vue3.0目前还没有正式发布。Vue CLI3和老版本的Vue ClI创建的项目方式是不一样的，创建项目的用法是一样的。Vue CLI3在项目编译速度上面做了一些优化。无论你用哪个版本的ClI，Vue3.0 发布之前写代码的方式都是一样的。
Vue CLI3的安装以及创建项目:
Vue CL的包名称由vue-cli 改成了@vue/cli。 如果你已经全局安装了旧版本的vue-cli (1.x 或 2.x)，你需要先通过sudo npm uninstall vue-cli -g或yarn global remove vue-cli 卸载它。
安装vue cli3：sudo cnpm install -g @vue/cli
创建项目：sudo vue create vue-demo02
运行:sudo npm run serve
编译:sudo npm run build
另一种创建项目的方式（推荐）
sudo vue init webpack-simple vue-demo03
cd vue-demo03
sudo cnpm install /sudo npm install
sudo npm run dev
请求数据的模板: vue-resource,axios,fetch jsonp
1.vue-resource
安装vue-resource（官方提供的vue的一个插件）https://github.com/pagekit/vue-resource
cd vue-demo01
sudo cnpm install vue-resource --save
/*使用vue-resource请求数据的步骤
1、需要安装vue-resource模块， 注意加上 --save
npm install vue-resource --save / cnpm install vue-resource --save
2、main.js引入 vue-resource
import VueResource from 'vue-resource';
3、main.js Vue.use(VueResource);
4、在组件里面直接使用
this.$http.get(地址).then(function(){
})
*/
2.axios
安装sudo cnpm install axios --save
哪里用哪里引入axios
3.fetch jsonp
安装sudo cnpm install fetch-jsonp --save
哪里用哪里引入fetch-jsonp
vue路由配置：
https://router.vuejs.org/
1.安装
sudo npm install vue-router --save /sudo cnpm install vue-router --save
2、在main.js文件中引入并 Vue.use(VueRouter) (main.js)
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3、配置路由
（1）、创建组件，引入组件
import Home from './components/Home.vue';
import News from './components/News.vue';
（2）、定义路由 （建议复制），注意名字
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News },
/*默认跳转路由*/
{ path: '*', redirect: '/home' }
]
（3）、实例化VueRouter
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
（4）、挂载路由
new Vue({
el: '#app',
router,
render: h => h(App)
})
（5 ）、根组件（App.vue）的模板里面添加
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>（6）、路由跳转
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
基于Vue的Ui框架:
Element Ui 基于vue pc端的UI框架
MintUi 基于vue 移动端的ui框架
mintUI的使用：
1.找官网http://mint-ui.github.io/docs/#/zh-cn2
2.安装 sudo cnpm install mint-ui -S -S表示 --save
3.引入mint Ui的css 和 插件
import Mint from 'mint-ui';
Vue.use(Mint);
import 'mint-ui/lib/style.css'
4.看文档直接使用。
element UI的使用：
1.找官网 http://element.eleme.io/#/zh-CN/component/quickstart
2.安装sudo cnpm install element-ui -S -S表示 --save
3.引入element UI的css 和 插件
import ElementUI from 'element-ui';
'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
4.*webpack.config.js 配置file_loader http://element.eleme.io/1.4/#/zh-CN/component/quickstart
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
}
5.看文档直接使用。
element UI组件的按需使用（第一种方法）：
1、sudo cnpm install babel-plugin-component -D
2、找到.babelrc 配置文件
把
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}
改为：
{
"presets": [["env", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
3、
import { Button, Select } from 'element-ui';
Vue.use(Button)
Vue.use(Select)
element UI组件的按需使用（第二种方法）：
import { Button, Select } from 'element-ui';
Vue.use(Button)
Vue.use(Select)
引入对应的css
import 'element-ui/lib/theme-chalk/index.css';
如果报错：webpack.config.js 配置file_loader
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
}
