1,普通网页使用方式
2,webpack 导入vue
npm install vue -S
第一种:js文件直接导入
第二种:js文件引入// import Vue from 'vue'
webpack.config.js中配置:
resolve: {
alias: {"vue$":"vue/dist/vue.js"}
}
两种方式都可以在html文件中正常使用
2,使用.vue文件
login.vue文件内容如下:
在main.js文件中使用如下语句引入:
import logfrom '../login.vue'
需要配置vue-loader:
安装: npm i vue-loader vue-template-compiler -D
配置:{test: /\.vue$/, use: 'vue-loader'}
此时运行会报错:
解决:配置vueLoaderPlugin
此种方式加载的template不能在components中使用,只能使用render
3,export default和export使用
test.js中 export default使用
export使用
调用:
node中:
4,webpack中router使用
安装:npm i vue-router -S
使用:1,导包 import VueRouterfrom 'vue-router'
2,手动安装router Vue.use(VueRouter)
3,创建路由对象
4,将路由对象挂载到vm上
5,render会覆盖el中的内容,所以router-view不能放到页面中的el范围
6,配置子路由
5,lang 和scoped
插件:Vutur和 Vue Snippets