nodejs 與 cnpm安裝
1. nodejs安裝
https://nodejs.org/en/download/
下載後安裝*.msi文件。
2. 查看node.js 與 npm 版本
PS C:\Users\David> node -v
v14.2.0
查看npm版本：
PS C:\Users\David> npm -v
6.14.4
3. 使用npm安裝vue-cli腳手架（不推薦）
原生npm方式，大概率會因爲網絡連接超時異常，導致安裝失敗。
PS C:\Users\David> cd 'C:\Program Files\nodejs\'
PS C:\Program Files\nodejs> ls
目錄: C:\Program Files\nodejs
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2020/5/28 23:49 node_modules
-a---- 2020/4/27 20:13 2951 install_tools.bat
-a---- 2020/5/5 17:39 55468184 node.exe
-a---- 2020/4/27 20:13 702 nodevars.bat
-a---- 2020/4/27 20:13 8997 node_etw_provider.man
-a---- 2020/4/27 20:12 930 npm
-a---- 2020/4/27 11:07 483 npm.cmd
-a---- 2020/4/27 20:12 922 npx
-a---- 2020/4/27 20:12 539 npx.cmd
PS C:\Program Files\nodejs> .\npm install @vue/cli -g
npm ERR! code ETIMEDOUT
npm ERR! errno ETIMEDOUT
npm ERR! network request to https://registry.npmjs.org/@vue%2fcli failed, reason: connect ETIMEDOUT 104.16.23.35:443
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\David\AppData\Roaming\npm-cache\_logs\2020-05-28T15_59_51_508Z-debug.log
PS C:\Program Files\nodejs>
4. 設置nodejs prefix（全局）和cache（緩存）路徑
4.1 nodejs安裝路徑下，新建node_global 和 node_cache文件夾。
PS C:\Program Files\nodejs> mkdir node_cache
目錄: C:\Program Files\nodejs
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2020/5/29 0:06 node_cache
PS C:\Program Files\nodejs> mkdir node_global
目錄: C:\Program Files\nodejs
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2020/5/29 0:06 node_global
PS C:\Program Files\nodejs> ls
目錄: C:\Program Files\nodejs
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2020/5/29 0:06 node_cache
d----- 2020/5/29 0:06 node_global
d----- 2020/5/28 23:49 node_modules
-a---- 2020/4/27 20:13 2951 install_tools.bat
-a---- 2020/5/5 17:39 55468184 node.exe
-a---- 2020/4/27 20:13 702 nodevars.bat
-a---- 2020/4/27 20:13 8997 node_etw_provider.man
-a---- 2020/4/27 20:12 930 npm
-a---- 2020/4/27 11:07 483 npm.cmd
-a---- 2020/4/27 20:12 922 npx
-a---- 2020/4/27 20:12 539 npx.cmd
PS C:\Program Files\nodejs> pwd
Path
----
C:\Program Files\nodejs
4.2 設置緩存文件夾 & 設置全局模塊存放路徑
PS C:\Program Files\nodejs> npm config set cache "C:\Program Files\nodejs\node_cache"
PS C:\Program Files\nodejs> npm config set prefix "C:\Program Files\nodejs\node_global"
後續使用命令npm install XXX -g 安裝的模塊默認就將保存在這裏（C:\Program Files\nodejs\node_global）。
5. 基於nodejs安裝cnpm（淘寶node鏡像）
PS C:\Program Files\nodejs> npm install -g cnpm --registry=https://registry.npm.taobao.org
>>
C:\Program Files\nodejs\node_global\cnpm -> C:\Program Files\nodejs\node_global\node_modules\cnpm\bin\cnpm
+ [email protected]
added 685 packages from 957 contributors in 24.893s
6. 將淘寶cnpm加入到系統環境變量Path中：
C:\Program Files\nodejs\node_global\node_modules\cnpm\bin
設置NODE_PATH系統變量：
7. 打開cmd工具
8. 安裝Vue
$ cnpm install vue -g
Microsoft Windows [版本 10.0.18363.836]
(c) 2019 Microsoft Corporation。保留所有權利。
C:\Windows\system32>cnpm install vue -g
Downloading vue to C:\Program Files\nodejs\node_global\node_modules\vue_tmp
Copying C:\Program Files\nodejs\node_global\node_modules\vue_tmp\[email protected]@vue to C:\Program Files\nodejs\node_global\node_modules\vue
Installing vue's dependencies to C:\Program Files\nodejs\node_global\node_modules\vue/node_modules
All packages installed (used 3ms(network 2ms), speed 0B/s, json 0(0B), tarball 0B)
9. 安裝vue-cli腳手架
$ cnpm install vue-cli -g
C:\Windows\system32>cnpm install vue-cli -g
Downloading vue-cli to C:\Program Files\nodejs\node_global\node_modules\vue-cli_tmp
Copying C:\Program Files\nodejs\node_global\node_modules\vue-cli_tmp\[email protected]@vue-cli to C:\Program Files\nodejs\node_global\node_modules\vue-cli
Installing vue-cli's dependencies to C:\Program Files\nodejs\node_global\node_modules\vue-cli/node_modules
[1/20] commander@^2.9.0 installed at node_modules\[email protected]@commander
[2/20] consolidate@^0.14.0 installed at node_modules\[email protected]@consolidate
[3/20] multimatch@^2.1.0 installed at node_modules\[email protected]@multimatch
[4/20] minimatch@^3.0.0 installed at node_modules\[email protected]@minimatch
[5/20] rimraf@^2.5.0 existed at node_modules\[email protected]@rimraf
[6/20] ora@^1.3.0 installed at node_modules\[email protected]@ora
[7/20] async@^2.4.0 installed at node_modules\[email protected]@async
[8/20] semver@^5.1.0 installed at node_modules\[email protected]@semver
[9/20] handlebars@^4.0.5 installed at node_modules\[email protected]@handlebars
[10/20] tildify@^1.2.0 installed at node_modules\[email protected]@tildify
[11/20] chalk@^2.1.0 installed at node_modules\[email protected]@chalk
[12/20] [email protected] installed at node_modules\[email protected]@uid
[13/20] [email protected] existed at node_modules\[email protected]@coffee-script
[14/20] user-home@^2.0.0 installed at node_modules\[email protected]@user-home
[15/20] read-metadata@^1.0.0 installed at node_modules\[email protected]@read-metadata
[16/20] inquirer@^6.0.0 installed at node_modules\[email protected]@inquirer
[17/20] validate-npm-package-name@^3.0.0 installed at node_modules\[email protected]@validate-npm-package-name
[18/20] metalsmith@^2.1.0 installed at node_modules\[email protected]@metalsmith
[19/20] request@^2.67.0 installed at node_modules\[email protected]@request
[20/20] download-git-repo@^1.0.1 installed at node_modules\[email protected]@download-git-repo
deprecate [email protected] › [email protected] › coffee-script@^1.12.4 CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
Recently updated (since 2020-05-22): 4 packages (detail see file C:\Program Files\nodejs\node_global\node_modules\vue-cli\node_modules\.recently_updates.txt)
2020-05-27
→ [email protected] › uglify-js@^3.1.4(3.9.4) (18:36:26)
→ [email protected] › [email protected] › [email protected] › [email protected] › unbzip2-stream@^1.0.9(1.4.3) (15:04:05)
2020-05-23
→ [email protected] › [email protected] › js-yaml@^3.8.1(3.14.0) (02:30:32)
→ [email protected] › aws4@^1.8.0(1.10.0) (05:21:33)
All packages installed (235 packages installed from npm registry, used 4s(network 4s), speed 1.3MB/s, json 221(462.49kB), tarball 4.56MB)
[[email protected]] link C:\Program Files\nodejs\node_global\vue@ -> C:\Program Files\nodejs\node_global\node_modules\vue-cli\bin\vue
[[email protected]] link C:\Program Files\nodejs\node_global\vue-init@ -> C:\Program Files\nodejs\node_global\node_modules\vue-cli\bin\vue-init
[[email protected]] link C:\Program Files\nodejs\node_global\vue-list@ -> C:\Program Files\nodejs\node_global\node_modules\vue-cli\bin\vue-list
C:\Windows\system32>
Project Init
-
新建d:\NodeProject目錄
-
手動安裝webpack
cnpm install webpack webpack-cli --save-dev
cnpm install [email protected]
- 使用模板新建項目
vue init webpack-simple mytest
一路回車：
C:\Users\David\Documents\DavidVSCodeWS1>vue init webpack-simple mytest
? Project name mytest
? Project description A Vue.js project
? Author
? License MIT
? Use sass? No
vue-cli · Generated "mytest".
To get started:
cd mytest
npm install
npm run dev
- 安裝工程依賴模塊
定位到mytest的工程目錄下，安裝該工程依賴的模塊，這些模塊將被安裝在：mytest\node_module目錄下，node_module文件夾會被新建，而且根據package.json的配置下載該項目的modules
cd mytest
cnpm install
操作日誌：
C:\Users\David\Documents\DavidVSCodeWS1>cd mytest
C:\Users\David\Documents\DavidVSCodeWS1\mytest>cnpm install
/ [5/12] Installing which-module@^2.0.0
WARN node unsupported "[email protected]" is incompatible with [email protected] › [email protected] › watchpack-chokidar2@^2.0.0, expected node@<8.10.0
- [5/12] Installing vm-browserify@^1.0.1platform unsupported [email protected] › [email protected] › [email protected] › fsevents@~2.1.2 Package require os(darwin) not compatible with your platform(win32)
platform unsupported [email protected] › [email protected] › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(win32)
[fsevents@~2.1.2] optional install error: Package require os(darwin) not compatible with your platform(win32)
[fsevents@^1.2.7] optional install error: Package require os(darwin) not compatible with your platform(win32)
√ Installed 12 packages
√ Linked 630 latest versions
[1/2] scripts.postinstall [email protected] › [email protected] › core-js@^2.5.0 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "C:\\Users\\David\\Documents\\DavidVSCodeWS1\\mytest\\node_modules\\[email protected]@core-js"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
[1/2] scripts.postinstall [email protected] › [email protected] › core-js@^2.5.0 finished in 132ms
[2/2] scripts.postinstall [email protected] › uglifyjs-webpack-plugin@^0.4.6 run "node lib/post_install.js", root: "C:\\Users\\David\\Documents\\DavidVSCodeWS1\\mytest\\node_modules\\[email protected]@uglifyjs-webpack-plugin"
[2/2] scripts.postinstall [email protected] › uglifyjs-webpack-plugin@^0.4.6 finished in 103ms
√ Run 2 scripts
deprecate [email protected] › chokidar@^2.1.2 Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
deprecate [email protected] › [email protected] › [email protected] › browserslist@^1.7.6 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
deprecate [email protected] › [email protected] › core-js@^2.5.0 core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
Recently updated (since 2020-05-22): 6 packages (detail see file C:\Users\David\Documents\DavidVSCodeWS1\mytest\node_modules\.recently_updates.txt)
√ All packages installed (732 packages installed from npm registry, used 7s(network 6s), speed 1.37MB/s, json 642(1.55MB), tarball 7.08MB)
- 運行項目，測試項目是否可正常工作，使用nodejs來啓動
cnpm run dev
將自動彈出項目頁面：
修改項目默認監聽端口/和打開瀏覽器方式
port: 8080, 設置server服務端口
open: true, 立即打開瀏覽器
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
port: 8080,
open: true,
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<dir id="app">
<p>{{ message }}</p>
</dir>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>