webpack创建Vue项目
总结
第一步
- 创建自己的项目目录
- 在项目目录中init出自己的package.json文件
- npm init (npm init -y) -y的结果是不用敲enter一路选择默认的值
第二步
- 安装webpack
- 命令 npm install webpack --save-dev
- 安装webpack-cli
- 命令 npm install webpack-cli --save-dev
安装第三方的框架
- 清除dist文件夹重新产生的dist文件的框架 (clean-webpack-plugin)
- 命令 npm install clean-webpack-plugin --save-dev
- 生成html文件的框架(html-webpack-plugin)
- 命令 npm install html-webpack-plugin --save-dev
- es6转译es5的依赖 babel
- npm i @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime --save-dev
- babel的运行环境
- 命令 npm i @babel/polyfill @babel/runtime --save
- 在项目的根目录中创建.babelrc文件 再文件中写入
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime"]
}
安装vue
- 命令 npm install vue --save
- 在主入口文件(你在webpack.config.js中entry中写入的文件)中导入vue
- 在主入口js文件中 实例化vue对象
new Vue({
el: '挂在点',
render: h => h(App)
})
- 在html文件中 把挂载点写上
- 在html body中写入
- 以上代码需要依赖vue-loader
- vue-loader 需要依赖一个vue的插件 vue-template-compiler
- 安装命令 npm install vue-loader --save-dev
- npm install vue-template-compiler --save-dev
- 在webpack.config.js文件中加入以下配置
plugins: [
new VueLoaderPlugin()
],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
- 在src文件夹下创建自己存放vue文件的文件夹以views为例
- 在views文件夹下创建vue文件 以home.vue为例
安装vue-router
- 命令 npm install vue-router --save
- 在src文件夹下创建router文件夹
- 在router文件夹中穿件index.js 文件
- 在js文件中写入以下代码
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
component: () => import ('../views/home.vue')
}
]
var router = new VueRouter({
routes
})
export default router
- 在入口js文件中引入router import router from ‘./router/index.js’
- 将router写在vue的实例化对象中