流程
- 新建项目（创建目录结构，创建package.json)
- 安装依赖
- run build
命令
新建项目命令
1 | npm init |
安装webpack vue vue-loader
1 | npm i webpack vue vue-loader |
可能会遇到提示npm WARN vue-loader@15.7.0 requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself.1
npm i css-loader
新建src目录存放源码
- 在
src目录新建app.vue文件开始敲代码,套路与HTML页面相同 - 在
根目录新建webpack.config.js配置文件，配置需要的插件
配置文件package.json的内容1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22{
"name": "vue1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"css-loader": "^2.1.1",
"vue": "^2.6.10",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.29.6"
},
"devDependencies": {
"webpack-cli": "^3.3.0"
}
}
参数解读，勾选为必须项，不能为空
- name:项目名称
- version：版本
- description：简介，一般用于
npm search - main：入口文件，一般默认为
index.js - scripts：脚本配置
- author：作者
- license：许可协议
- dependencies：相关依赖包
- devDependencies：开发环境所需模块
配置文件webpack.config.js的内容1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20const path = require('path') //加载path模块
const { VueLoaderPlugin } = require('vue-loader')//加载vue-loader模块
module.exports = {
entry: path.join(__dirname, 'src/index.js'),//入口
output: {
filename: 'bundle.js',//输出的文件名
path: path.join(__dirname, 'dist')//输出的路径
},
module: {
rules: [
{ test: /\.vue$/, loader: 'vue-loader' },//加载vue-loader模块，支持.vue后缀文件
{ test: /\.vue\.html$/, loader: 'vue-loader' },
{ test: /.css$/, loader: 'css-loader' }//支持css代码
]
},
plugins: [
new VueLoaderPlugin()//添加vue-loader模块
]
}
生成
根据package.json中script字段的值执行命令1
npm run build
Q & N (问题与记录)
Q:npm install 与 npm i有什么区别？
N：
实际使用的区别点主要如下(windows下)：
- 用npm i安装的模块无法用npm uninstall删除，用npm uninstall i才卸载掉
- npm i会帮助检测与当前node版本最匹配的npm包版本号，并匹配出来相互依赖的npm包应该提升的版本号
- 部分npm包在当前node版本下无法使用，必须使用建议版本
- 安装报错时intall肯定会出现npm-debug.log 文件，npm i不一定
作者：风翻火焰
原文：https://blog.csdn.net/chern1992/article/details/79193211
Q:安装时提示1
2
3
4
5
6
7npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "vue" under a package
npm ERR! also called "vue". Did you name your project the same
npm ERR! as the dependency you re installing?
npm ERR!
npm ERR! For more information, see:
npm ERR! <https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm>
N:在package.json文件中的项目名称不能为vue，改名即可
Q：安装时有黄色的WARN怎么办？
N：根据提示安装相关的依赖,以下提示是因为前面npm init步骤均为空(回车)的警告1
2npm WARN vue1@1.0.0 No description
npm WARN vue1@1.0.0 No repository field.
Q：vs code没有vue的代码补全怎么办？
N：在设置中安装HTML Snippets插件，并在设置中添加配置1
2
3
4
5"files.associations": {
"*.ejs" : "html",
"*.js" : "html",
"*.vue" : "html"
}
Q:遇到警告 Module parse failed: Unexpected character '#' (18:0) You may need an appropriate loader to handle this file type.
N：缺少引用的插件，无法识别相应后缀名的代码及文件,添加引用即可