代码拉取完成，页面将自动刷新
1、产看Node.js的版本：node -v
C:\Users\root>node -v
v12.13.1
2、npm是Node.js的包管理器，有很多命令，在node安装中内置 查看npm的版本：npm -v
C:\Users\root>npm -v
6.13.7
3、升级npm到最新版本：npm install npm@latest -g
C:\Users\root>npm install npm@latest -g
D:\nodejs\node_global\npm -> D:\nodejs\node_global\node_modules\npm\bin\npm-cli.js
D:\nodejs\node_global\npx -> D:\nodejs\node_global\node_modules\npm\bin\npx-cli.js
+ npm@6.13.7
updated 1 package in 31.971s
4、npm初始化项目配置文件package.json：npm init -y
C:\Users\root\Desktop\web15\test>npm init -y
Wrote to C:\Users\root\Desktop\web15\test\package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
5、npm的安装包到项目依赖：npm install jquery --save
C:\Users\root\Desktop\web15\test>npm install jquery --save
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN test@1.0.0 No description
npm WARN test@1.0.0 No repository field.
+ jquery@3.4.1
added 1 package from 1 contributor in 1.006s
6、npm查看远程仓库文件的版本：npm view axios versions
C:\Users\root\Desktop\web15\test>npm view axios versions
[
'0.1.0', '0.2.0', '0.2.1',
'0.18.0', '0.18.1', '0.19.0-beta.1',
'0.19.0', '0.19.1', '0.19.2'
]
7、npm安装指定版本的包到开发依赖：npm i axios@0.19.1 --save-dev
C:\Users\root\Desktop\web15\test>npm i axios@0.19.1 --save-dev
npm WARN test@1.0.0 No description
npm WARN test@1.0.0 No repository field.
+ axios@0.19.1
added 4 packages from 7 contributors in 1.281s
8、npm的卸载包：npm uninstall axios
C:\Users\root\Desktop\web15\test>npm uninstall axios
npm WARN test@1.0.0 No repository field.
removed 4 packages in 0.396s
9、npm查看安装的包列表：npm list
C:\Users\root\Desktop\web15\test>npm list
test@1.0.0 C:\Users\root\Desktop\web15\test
`-- jquery@3.4.1
10、npm安装cnpm国内镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org
C:\Users\root\Desktop\web15\test>npm install -g cnpm --registry=https://registry.npm.taobao.org
D:\nodejs\node_global\cnpm -> D:\nodejs\node_global\node_modules\cnpm\bin\cnpm
+ cnpm@6.1.1
removed 1 package and updated 4 packages in 33.126s
11、查看cnpm的版本：cnpm -v
C:\Users\root\Desktop\web15\test>cnpm -v
cnpm@6.1.1 (D:\nodejs\node_global\node_modules\cnpm\lib\parse_argv.js)
npm@6.13.7 (D:\nodejs\node_global\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@12.13.1 (D:\nodejs\node.exe)
npminstall@3.27.0 (D:\nodejs\node_global\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=D:\nodejs\node_global
win32 x64 10.0.17134
registry=https://r.npm.taobao.org
12、使用cnpm安装包：cnpm i jquery@latest --save
C:\Users\root\Desktop\web15\test>cnpm i jquery@latest --save
√ Installed 1 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (1 packages installed from npm registry, used 692ms(network 681ms), speed 8.2kB/s, json 1(5.58kB), tarball 0B)
13、查看全局安装包的位置
C:\Windows\system32>npm prefix -g
D:\Program Files\nodejs
-----------------------------------初始换vue项目的流程-----------------------------------
14、npm全局安装2.*版本的vue-cli:npm i -g vue-cli
C:\Users\root>npm i -g vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
D:\nodejs\node_global\vue-list -> D:\nodejs\node_global\node_modules\vue-cli\bin\vue-list
D:\nodejs\node_global\vue -> D:\nodejs\node_global\node_modules\vue-cli\bin\vue
D:\nodejs\node_global\vue-init -> D:\nodejs\node_global\node_modules\vue-cli\bin\vue-init
+ vue-cli@2.9.6
removed 1 package and updated 3 packages in 14.164s
15、vue查看当前vue的版本：vue -V(大写)
C:\Users\root>vue -V
2.9.6
16、安装2.*以上的vue脚手架：npm install -g @vue/cli（我们使用vue-cli 2.*）
17、npm全局安装webpack:npm i webpack -g
C:\Users\root>npm i webpack -g
D:\nodejs\node_global\webpack -> D:\nodejs\node_global\node_modules\webpack\bin\webpack.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\webpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ webpack@4.41.6
added 14 packages from 4 contributors, removed 2099 packages and updated 308 packages in 33.386s
18、查看webpack的版本:webpack -v
C:\Users\root>webpack -v
4.41.6
19、使用vue-init命令创建基于webpack的vue项目：
F:\web_workspace\web15\vue_20200212_28>vue init webpack vue_20200212_28
? Project name vue_20200212_28
? Project description A Vue.js project
? Author root <95243611@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "vue_20200212_28".
cd vue_project
npm run dev
20、打包上线
注意，自己的项目文件都需要放到 src 文件夹下。
在项目开发完成之后，可以输入 npm run build 来进行打包工作。
npm run build
修改打包disc->index.html里没引号
a、build ->webpack.prod.conf.js ->
//true没有双引号,false有双引号
removeAttributeQuotes: false
b、config ->index.js ->
assetsPublicPath: './',
21、修改项目的格式化配置
1）使用.prettierrc.json配置文件
{
"semi": false,
"singleQuote": true
}
2）在eslintrc.js中的rules中添加 'space-before-function-paren': 0,方法前不要空格
rules: {
'space-before-function-paren': 0,
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
22、重写路由的push方法，解决重复点击同一个连接的报错的bug
const routerPush = Router.prototype.push;
Router.prototype.push = function push(location) {
return routerPush.call(this, location).catch(err => err);
}
23、解决vue cli3.0打包上线静态资源找不到路径问题
解决方法是：
在项目的根目录下创建vue.config,js文件，在里面配置静态资源的路径，publicPath是配置静态资源路径的属性，vue.config,js文件的代码如下：
module.exports = {
publicPath: './'
}
24、我这里是使用清除npm的缓存解决的:
cmd命令行中输入：
npm cache clean --force
25、报错Error: connect EPERM //./pipe/rpc.sock
管理员命令结束所有node.exe进程：taskkill /f /t /im node.exe
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
