环境搭建
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Vue]]
&color(red){※前提条件：本情報はVue 2.0を基づいて説明して...
#contents
* node.js [#rffe4ed3]
** 下载 [#he585c2d]
VUE的使用需要用到node.js，下载地址：
https://nodejs.org/en/download/
** 安装node [#x97f23a7]
&color(red){注意：};最新版本的 v20 他对里面的类库版本依赖...
下载 node-v16.14.2-x64.msi 后安装，结束收cmd输入命令
node -v
//v16.14.2
*** 常用命令 [#u51a0778]
查看/设置nodejs缓存路径
npm config get cache
npm config set cache "E:\nodejs\node_cache"
查看/设置nodejs默认下载安装包路径
npm config get prefix
npm config set prefix "E:\nodejs\node_global"
查看全局包
npm list -global
** 安装cnpm [#g5b7ed9e]
npm install -g cnpm
下面的命令用于，安装单个包时，特别指定镜像
npm install -g cnpm --registry=https://registry.npm.taob...
//2022/04/12现在这个镜像速度也不行了
** npm设置镜像/代理 [#xf8e4808]
*** 代理 [#oe966262]
一般直接删掉代理即可
查看当前代理
npm config get proxy
npm config get https-proxy
设置代理
npm config set proxy http://server:port
npm config set https-proxy http://server:port
删除代理
npm config set proxy null
npm config set https-proxy null
*** 镜像源 [#xde55cd8]
可以解决下载网速慢的问题
查看当前镜像源
npm get registry
如果网速太慢的话，可以如下切换到淘宝的镜像
使用下面命令切换安装镜像
【废】npm config set registry https://registry.npm.taoba...
npm config set registry https://registry.npmmirror.org
下面的命令可以切换回原镜像（安装一些package不容易报错）
npm config set registry https://registry.npmjs.org
* 安装webpack模板 [#zcf0442b]
输入以下命令进行安装
npm install webpack -g
npm install --global webpack-cli
* 安装VUE [#lb7fea9b]
cnpm install --global vue-cli
//npm中安装指定的版本号，格式为 ‘包名@版本号’
//npm install --save 包名称@版本号
npm install --save router@2.0.7
验证是否安装成功
vue
//输出下面vue信息，则安装成功
查看安装的版本号
vue -V
#codeprettify{{
C:\Users\Administrator>vue
Usage: vue <command> [options]
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
init generate a new project from a template
list list available official templates
build prototype a new project
create (for v3 warning only)
help [cmd] display help for [cmd]
}}
* 第一个工程 [#oebf9646]
** 创建第一个工程 [#k10a8685]
vue init webpack my-project
&ref(vue_install6.png);
创建完成后文件夹的构成
&ref(vue_install7.png);
** 安装依赖 [#d043dd92]
&color(red){注意：};需要将控制台的路径切换到project的路径...
cnpm install
** 运行 [#r4031902]
启动运行
npm run dev
如果报下面的错误，则是因为上一步的cnpm install命令没有执...
'vue-cli-service' 不是内部或外部命令，也不是可运行的程序...
执行命令： npm install webpack-dev-server
&ref(vue_install8.png);
浏览器启动
&ref(vue_install9.png);
** 发布 [#qa5376e3]
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
如果API涉及到跨域、或者是API服务器分离的话，可以参考 [[+I...
这里请注意 IIS 部署 Vue 项目时，有个注意的问题：
F5刷新界面报 404
https://blog.csdn.net/IT_laohu/article/details/124735538
** 启动的服务器无法被局域网访问问题 [#j6e100e8]
下面的host由“localhost”改为IP地址。修改后即便在本机也要使...
#codeprettify{{
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: '192.168.0.60', // can be overwritten by proces...
port: 8080, // can be overwritten by process.env.PORT...
autoOpenBrowser: false,
}}
* Troubleshooting [#x232ffde]
** 清除缓存也是解决安装失败和速度慢的常见方法。 [#y39b04e0]
以下是清除缓存的步骤：
npm cache clean --force
** ETIMEDOUT [#q69ec535]
问题的现象：使用npm安装任何包，安装半天进度条一动不动最后...
#codeprettify{{
PS F:\DataViewer\SINODataViewer\WebClient> npm install no...
npm ERR! code ETIMEDOUT
npm ERR! errno ETIMEDOUT
npm ERR! network request to https://registry.npm.taobao.o...
npm ERR! network This is a problem related to network con...
npm ERR! network In most cases you are behind a proxy or ...
npm ERR! network
npm ERR! network If you are behind a proxy, please make s...
npm ERR! network 'proxy' config is set properly. See: 'n...
}}
原因：下载的源地址无法访问，需要更换一个下载的镜像
下面的命令切换到taobao的镜像的地址
npm config set registry http://registry.npm.taobao.com
方式三、如果上述两步的操作并没有解决问题，那么可试下重启...
此时再输入命令 npm i node-sass，一般就能解决问题；
** request to https://registry.npm.taobao.org failed, rea...
原因是淘宝镜像过期了
其实，早在 2021 年，淘宝就发文称，npm 淘宝镜像已经从 reg...
旧域名也将于 2022 年 5 月 31 日停止服务（不过，直到今天 ...
解决方法
+ 查看当前的npm镜像设置：npm config list
+ 清空缓存：npm cache clean --force
+ 然后修改镜像即可：npm config set registry https://regis...
** 'webpack-dev-server' 不是内部或外部命令，也不是可运行...
执行命令：
npm install webpack-dev-server;
** node与node-sass版本不匹配解决方法 [#v066111b]
出现node版本不匹配问题时
+ 删除旧的"node_modules"文件夹；
+ 修改"package.json"，在"devDependencies"中增加"node": "^...
+ npm install -s node-sass@4.14.1;
+ npm install --save --legacy-peer-deps;
+ npm run dev
** Error: Cannot find module 'xxx' [#l0e6f6a9]
执行命令：
npm install
** 使用了高版本的node.js之后随之而来有可能的问题 [#raf280...
ERESOLVE与npm@7有关的问题很常见，因为npm7.x对某些事情比np...
如果这不能立即起作用，也许可以先删除node_modules和package...
***版本过高的问题 [#q5126889]
降级npm到6版本
或者
使用npx指定npm的版本 npx -p npm@6 npm i --legacy-peer-deps
使用--force或--legacy-peer-deps可解决这种情况。
--force 会无视冲突，并强制获取远端npm库资源，当有资源冲...
--legacy-peer-deps：安装时忽略所有peerDependencies，忽视...
npm install --legacy-peer-deps
*** webpack 的问题 [#w87a5c0c]
卸载当前的webpack ，然后重新指定一个全局版本。
npm uninstall webpack
npm install webpack@4.4.0 -g
此问题，第一种方式是全局安装Webpack和webpack-dev-server, ...
npm install webpack webpack-cli webpack-dev-server -g
如果您已经全局安装Webpack和webpack-dev-server，可以采用第...
npm install webpack webpack-cli webpack-dev-server --sav...
#hr();
コメント：
#comment_kcaptcha
終了行:
[[Vue]]
&color(red){※前提条件：本情報はVue 2.0を基づいて説明して...
#contents
* node.js [#rffe4ed3]
** 下载 [#he585c2d]
VUE的使用需要用到node.js，下载地址：
https://nodejs.org/en/download/
** 安装node [#x97f23a7]
&color(red){注意：};最新版本的 v20 他对里面的类库版本依赖...
下载 node-v16.14.2-x64.msi 后安装，结束收cmd输入命令
node -v
//v16.14.2
*** 常用命令 [#u51a0778]
查看/设置nodejs缓存路径
npm config get cache
npm config set cache "E:\nodejs\node_cache"
查看/设置nodejs默认下载安装包路径
npm config get prefix
npm config set prefix "E:\nodejs\node_global"
查看全局包
npm list -global
** 安装cnpm [#g5b7ed9e]
npm install -g cnpm
下面的命令用于，安装单个包时，特别指定镜像
npm install -g cnpm --registry=https://registry.npm.taob...
//2022/04/12现在这个镜像速度也不行了
** npm设置镜像/代理 [#xf8e4808]
*** 代理 [#oe966262]
一般直接删掉代理即可
查看当前代理
npm config get proxy
npm config get https-proxy
设置代理
npm config set proxy http://server:port
npm config set https-proxy http://server:port
删除代理
npm config set proxy null
npm config set https-proxy null
*** 镜像源 [#xde55cd8]
可以解决下载网速慢的问题
查看当前镜像源
npm get registry
如果网速太慢的话，可以如下切换到淘宝的镜像
使用下面命令切换安装镜像
【废】npm config set registry https://registry.npm.taoba...
npm config set registry https://registry.npmmirror.org
下面的命令可以切换回原镜像（安装一些package不容易报错）
npm config set registry https://registry.npmjs.org
* 安装webpack模板 [#zcf0442b]
输入以下命令进行安装
npm install webpack -g
npm install --global webpack-cli
* 安装VUE [#lb7fea9b]
cnpm install --global vue-cli
//npm中安装指定的版本号，格式为 ‘包名@版本号’
//npm install --save 包名称@版本号
npm install --save router@2.0.7
验证是否安装成功
vue
//输出下面vue信息，则安装成功
查看安装的版本号
vue -V
#codeprettify{{
C:\Users\Administrator>vue
Usage: vue <command> [options]
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
init generate a new project from a template
list list available official templates
build prototype a new project
create (for v3 warning only)
help [cmd] display help for [cmd]
}}
* 第一个工程 [#oebf9646]
** 创建第一个工程 [#k10a8685]
vue init webpack my-project
&ref(vue_install6.png);
创建完成后文件夹的构成
&ref(vue_install7.png);
** 安装依赖 [#d043dd92]
&color(red){注意：};需要将控制台的路径切换到project的路径...
cnpm install
** 运行 [#r4031902]
启动运行
npm run dev
如果报下面的错误，则是因为上一步的cnpm install命令没有执...
'vue-cli-service' 不是内部或外部命令，也不是可运行的程序...
执行命令： npm install webpack-dev-server
&ref(vue_install8.png);
浏览器启动
&ref(vue_install9.png);
** 发布 [#qa5376e3]
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
如果API涉及到跨域、或者是API服务器分离的话，可以参考 [[+I...
这里请注意 IIS 部署 Vue 项目时，有个注意的问题：
F5刷新界面报 404
https://blog.csdn.net/IT_laohu/article/details/124735538
** 启动的服务器无法被局域网访问问题 [#j6e100e8]
下面的host由“localhost”改为IP地址。修改后即便在本机也要使...
#codeprettify{{
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: '192.168.0.60', // can be overwritten by proces...
port: 8080, // can be overwritten by process.env.PORT...
autoOpenBrowser: false,
}}
* Troubleshooting [#x232ffde]
** 清除缓存也是解决安装失败和速度慢的常见方法。 [#y39b04e0]
以下是清除缓存的步骤：
npm cache clean --force
** ETIMEDOUT [#q69ec535]
问题的现象：使用npm安装任何包，安装半天进度条一动不动最后...
#codeprettify{{
PS F:\DataViewer\SINODataViewer\WebClient> npm install no...
npm ERR! code ETIMEDOUT
npm ERR! errno ETIMEDOUT
npm ERR! network request to https://registry.npm.taobao.o...
npm ERR! network This is a problem related to network con...
npm ERR! network In most cases you are behind a proxy or ...
npm ERR! network
npm ERR! network If you are behind a proxy, please make s...
npm ERR! network 'proxy' config is set properly. See: 'n...
}}
原因：下载的源地址无法访问，需要更换一个下载的镜像
下面的命令切换到taobao的镜像的地址
npm config set registry http://registry.npm.taobao.com
方式三、如果上述两步的操作并没有解决问题，那么可试下重启...
此时再输入命令 npm i node-sass，一般就能解决问题；
** request to https://registry.npm.taobao.org failed, rea...
原因是淘宝镜像过期了
其实，早在 2021 年，淘宝就发文称，npm 淘宝镜像已经从 reg...
旧域名也将于 2022 年 5 月 31 日停止服务（不过，直到今天 ...
解决方法
+ 查看当前的npm镜像设置：npm config list
+ 清空缓存：npm cache clean --force
+ 然后修改镜像即可：npm config set registry https://regis...
** 'webpack-dev-server' 不是内部或外部命令，也不是可运行...
执行命令：
npm install webpack-dev-server;
** node与node-sass版本不匹配解决方法 [#v066111b]
出现node版本不匹配问题时
+ 删除旧的"node_modules"文件夹；
+ 修改"package.json"，在"devDependencies"中增加"node": "^...
+ npm install -s node-sass@4.14.1;
+ npm install --save --legacy-peer-deps;
+ npm run dev
** Error: Cannot find module 'xxx' [#l0e6f6a9]
执行命令：
npm install
** 使用了高版本的node.js之后随之而来有可能的问题 [#raf280...
ERESOLVE与npm@7有关的问题很常见，因为npm7.x对某些事情比np...
如果这不能立即起作用，也许可以先删除node_modules和package...
***版本过高的问题 [#q5126889]
降级npm到6版本
或者
使用npx指定npm的版本 npx -p npm@6 npm i --legacy-peer-deps
使用--force或--legacy-peer-deps可解决这种情况。
--force 会无视冲突，并强制获取远端npm库资源，当有资源冲...
--legacy-peer-deps：安装时忽略所有peerDependencies，忽视...
npm install --legacy-peer-deps
*** webpack 的问题 [#w87a5c0c]
卸载当前的webpack ，然后重新指定一个全局版本。
npm uninstall webpack
npm install webpack@4.4.0 -g
此问题，第一种方式是全局安装Webpack和webpack-dev-server, ...
npm install webpack webpack-cli webpack-dev-server -g
如果您已经全局安装Webpack和webpack-dev-server，可以采用第...
npm install webpack webpack-cli webpack-dev-server --sav...
#hr();
コメント：
#comment_kcaptcha
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
