教你手动构建一个vue项目
首先要明白vue项目的基本目录结构，如下：
1. dist
2. src
2.1 index.html
2.2 index.js
2.3 App.vue
2.4 router.js
3. webpack.config.js
4. .babelrc
以上是基本目录，首先应该初始化目录，使用 npm init -y 初始化目录，会生成 package.json 这个文件，这个文件很关键
步骤：
1. 下载 webpack
cnpm i webpack webpack-cli --save
2. 下载 实时监控代码修改的插件 webpack-dev-server
cnpm i webpack-dev-server --save
3. 然后在 package.json 里的 scritps 里添加指令："dev":"webpack-dev-server --open --port 3000 --hot"
添加热更新
4. 可以让 html 文件存到内存里面，因此要下载插件 html-webpack-plugin
下载之后，在 webpack.config.js 文件里设置
首先引入 html-webpack-plugin 插件
const htmlWebpackPlugin = require("html-webpack-plugin")
然后在 webpack.config.js 里添加 plugins 属性，然后在 plugins属性里添加
new htmlWebpackPlugin({
template:__dirname+"/src/index.html",
filename:"index.html"
})
这样就可以了
5. 首先你看到有 js 文件，为了适合 es6 语法，因此要使用 babel 来帮助webpack识别 es6 语法，因此下载 babel 插件
babel-core [email protected]
babel-preset-env babel-preset-stage-0
babel-plugin-transform-runtime
然后在 .babelrc 文件里添加这些插件
{
"presets":["env","stage-0"],
"plugins":["transform-runtime"]
}
如图：
然后在 webpack.config.js 里 添加解析 js 文件的匹配loader
{ test:/\.js$/, use:"babel-loader" , exclude:/node_modules/ }
6. 然后你看到 App.vue, 因此也要解析 vue 文件
首先要下载解析的loader，和相应的插件，如下：
vue-loader vue-template-compiler
然后在 webpack.config.js 里添加解析 vue 文件的 loader
{ test:/\.vue$/, use:"vue-loader" }
同时要添加 vue-loader-plugin 插件
7. 将 router.js 和 App.vue 添加到 index.js
如图：
至此，vue项目就已经成功创建了，你可以执行 npm run dev 来执行项目
以上是 教你手动构建一个vue项目 的全部内容， 来源链接： utcz.com/z/378392.html
