1. 单文件组件
单文件组件就是文件扩展名为 .vue
的 single-file components(单文件组件) ,详细请看 https://cn.vuejs.org/v2/guide/single-file-components.html
2. 单文件组件的使用
2.1 创建单文件组件 例如创建名为app.vue 的组件
1 <template> 2 <div> 3 {{msg}} 4 </div> 5 </template> 6 <script> 7 export default { //由export default 导出一个对象 8 data(){ 9 return { 10 msg: 'hello world' 11 } 12 } 13 } 14 </script> 15 <style> 16 div { 17 color: #f00; 18 } 19 </style>
2.2 安装 loader
命令: npm install vue --save
npm install vue-loader vue-template-compiler --save-dev
2.3 创建一个app.js文件 把loader 引入 然后在new一个实例,并且在HTML中创建id为APP 的元素,然后再引入App组件,通过 render 函数 把组件渲染到页面
1 // 引入vue 这里的vue就死通过npm 安装过来的 2 import Vue from 'vue' 3 // 引入创建的App 组件 4 import App from './components/app.vue' 5 //new 一个实例 6 new Vue({ 7 el: '#app', 8 // render: function(h){ // 参数名h 可以随便取 9 // return h(App) //render函数就是把App组件渲染到 #APP 的实例上 10 // } 11 12 //把render函数写为ES6的写法 13 render: h => h(App) 14 })
2.4 在webpack.config.js文件中配置 vue-template-compiler (因为浏览器不能够解析vue文件 所以需要插件来打包翻译)配置方法如下;
{
test: /\.vue$/,
loader: 'vue-loader'
}
2.5 运行 npm run dev
路由的配置
命令: npm install vue-router --save
配置文件app.js
1 //app.js 2 import Vue from 'vue' 3 import App from './App.vue' 4 import Login from './Login.vue' 5 // 1. 引入vue-router 6 import VueRouter from 'vue-router' 7 // 2. 表示使用路由插件 8 Vue.use(VueRouter) 9 //3. 配置路由规则 10 var router = new VueRouter({ 11 routes: [ 12 { name: 'login', path: '/login', component: Login } 13 ] 14 }) 15 new Vue({ 16 el: '#app', 17 // 挂载路由 18 router, 19 // 这是个渲染函数,指定渲染组件 20 render: h => h(App) 21 })
3.vue-cli脚手架工具
vue-cli 是一个官方脚手架工具,所谓脚手架就是一架子,什么架子呢,项目结构的架子,里面有一些最基本的配置,利用vue-cli 我们可以生成这样的一个架子,所以它被称为vue脚手架工具
命令: npm install vue-cli -g
vue init webpack admin 这行命令的意思是用vue初始化一个以webpack工具打包的名为admin的项目