平时一般都用vue-cli,今天自己来手动搭一个vue项目,当然基本项目结构还是参考vue-cli的。
引入vue包错误
在js文件中直接 import Vue from 'vue' 导入vue之后使用可能会报一下错误
webpack You are using the runtime-only build of Vue where the template compiler is not available...
这是因为node_modules目录下vue目录下package.json中
实际上我们想引的是vue.js
解决办法:可以在webpack.config.js文件中加入一个别名配置
//与plugins、module同级
resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
}
使用.vue文件
需要使用 vue-loader 解析处理.vue文件,vue-loader依赖 vue-template-compiler
npm install vue-loader vue-template-compiler --save-dev
一贯套路在webpack.config.js中加入一个loader规则
{
test: /\.vue$/,
use: ['vue-loader']
}
注意:如果就这样直接还是会报错,因为Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的。
所以还应该在webpack.config.js中加入插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
...
...
plugins: [
new VueLoaderPlugin()
]
至此就可以在项目中正常使用.vue文件了
省略文件扩展名
在resolve配置中加一条
//与plugins、module同级
resolve: {
extensions: ['.js', '.vue', '.json'],//后缀是.js .vue .json的可以省略后缀
...
}
路由
装包vue-router
npm install vue-router --save
src目录下创建router目录,router目录下新建index.js文件,index.js内容:
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../pages/home.vue'; //这是写好的一个组件
// 安装路由
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{path: '/', redirect: '/home'},
{
path: '/home',
component: Home
}
]
})
然后在main.js中引入然后挂载到vue实例中即可
import router from './router';
new Vue({
el: '#app',
router,
...
})