时代的发展，前端开发也越来越复杂化，从简单的切图到如今的全栈攻城狮！我们也需要不断进步跟上时代的脚步，如今最火的vue框架使用，今天给大家分享一下vue脚手架的使用方法！
先说一下vue的特点:
轻 小 易用 性能高 数据双向绑定 组件化
这几点是我总结的就不一一具体说明了。
下面给大家介绍具体的使用方法:
开发环境
nodejs
npm webpack
vue的组件都是通过.vue文件来实现，这些文件无法被浏览器解析的，需要webpack
vue-cli 脚手架:
用来生成vue的模板（架子），相当于按照设计图搭建好房子的架子。
开发步骤
1、下载node
2、下载webpack
npm install webpack -g
3、安装脚手架npm install vue-cli -g
4、根据模板创建项目
simple 完全没用
webpack-simple 用他
webpack 有校验
browserify-simple
browserify找到文件夹进去
vue init <模板的名称> 工程的名称（不用用中文）
如果需要1.0 vue init webpack-simple[#1.0]
webpack-simple-demo
项目名称，项目描述，作者，是否用sass
5、进入项目文件夹
6、npm install下载依赖项（各种loader)
因为文件是.vue结尾的浏览器不认识需要loder进行解析。
7、安装路由和交互
npm install vue-router vue-resource --save
8、启动项目npm run dev
以上就是项目的创建！
编写项目
编写项目 App.vue 主文件
所有的html写在 template
模板里面必须有一个根文件
所有的js export default {
name: 'app',
data () {return {msg: 'Welcome to Your Vue.js App'}},methods:{}}
数据必须放在函数的返回值中
组件的写法
1、创建文件 .vue结尾
2、写文件
<template>
写HTML
</template>
export default {data(){return {}},methods:{}}
<style>
写样式
</style>
3、在主组件中引用
a)import XXX from ‘上面创建的文件的路径’
b)挂在js里 data(){}, components:{XXX}
c)在template里面用<xxx><xxx>
路由
1、修改文件
找到webpack.config.js
看有没有
resolve: {alias: {'vue$': 'vue/dist/vue.esm.js'}}
如果没有
resolve: {alias: {'vue':'vue/dist/vue.js'}}
2、再准备一些组件
3、修改main.js(入口文件)
a）引入路由文件
import VueRouter from 'vue-router'
b)开启路由
Vue.use(VueRouter);
c)写模板，或者是引入模板 const First={template:'<div>我是第一个模板</div>'};
import second from './component/second.vue';
d)配置路由
const router=new VueRouter({
routes:[{path:'/first',component:First},{path:'/second',component:second}]
})
e)在vue中把路由挂载上
new Vue({router,el: '#app',render: h => h(App)})
f)在主模板中写路由的按钮和展示
<router-link to="/first">111</router-link>
<router-link to="/second">111</router-link>
<router-view></router-view>
项目打包:
npm run build
会生成一个文件dist文件
上线:
上线要用dist文件
注：可能会因为loader不全报错只要再重新下载loader就可以了
网友评论