前言你前提应该懂下面基础知识:
下载 node.JS 下好后自带 NPM 命令 终端查看命令 NPM -v 即可看到安装版本
安装淘宝镜像: NPM install -g cnpm --registry=https://registry.npm.taobao.org
NPM init 在项目中引导创建一个 package.JSON 文件 常用 NPM init -y 直接自动生成
NPM config 管理 NPM 的配置路径
- NPM config set <key> <value> [-g|--global]
- NPM config get <key>
- NPM config delete <key>
- NPM config list
- NPM config edit
- NPM get <key>
- NPM set <key> <value> [-g|--global]
例如在公司内网, 因为公司的防火墙原因, 无法完成任何模块的安装, 这个时候设置代理可以解决
NPM config set proxy=http://xxx.com:8080
又如国内的网络环境问题, 某官方的 IP 可能被和谐了, 幸好国内有好心人, 搭建了镜像, 此时我们简单设置镜像
NPM config set registry="http://r.cnpmjs.org"
也可以临时配置, 如安装淘宝镜像
NPM install -g cnpm --registry=https://registry.npm.taobao.org
NPM cache 管理模块的缓存
最常用命令清除 NPM 本地缓存
NPM cache clean
NPM/cnpm 安装模块时候情况如下:
1, 正常安装: NPM install [模块] -S/-D 常用选项
2, 指定版本安装: NPM install [模块]@版本 -S/-D 常用选项
-S, --save 安装包信息将加入到 dependencies(生产阶段的依赖)
-D, --save-dev 安装包信息将加入到 devDependencies(开发阶段的依赖), 所以开发阶段一般使用它
-O, --save-optional 安装包信息将加入到 optionalDependencies(可选阶段的依赖)
-E, --save-exact 精确安装指定模块版本
安装新版本之前一般建议卸载之前的老版本 vue-cli:
- NPM uninstall vue-cli -g
- #or
- yarn global remove vue-cli
对于 Vue 3, 您应该使用 Vue CLI v4.5 @vue/cli. 要升级, 您需要在 @vue/cli 全局重新安装最新版本
- yarn global add @vue/cli
- # or
- NPM install -g @vue/cli
然后在 Vue 项目中运行
vue upgrade --next
创建项目
vue create <Project Name> // 文件名 不支持驼峰(含大写字母)
vue3 版本搭建项目流程中遇到的问题:
新建项目命令控制台报错
vue : 无法加载文件 C:\Users\Administrator.WIN-MHB8ELOJK80\AppData\Roaming\NPM\vue.ps1, 因为在此系统上禁止运行脚本. 有关详细信息, 请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies.
所在位置 行: 1 字符: ;
解决办法:
1. 以管理员身份运行 PowerShell
2. 执行: get-ExecutionPolicy, 回复 Restricted, 表示状态是禁止的
3. 执行: set-ExecutionPolicy RemoteSigned
4. 选择 Y
这下成功开始新建项目
按 a 全选或者逐个按需要选择[空格键] 选好回车
选择 vue 版本 2.x or 3.x 版本
是否使用 history router;Vue-Router 利用了浏览器自身的 hash 模式和 history 模式的特性来实现前端路由(通过调用浏览器提供的接口)
语法检测以及代码格式化
是否保存本次配置 (y: 记录本次配置, 然后需要你起个名; n: 不记录本次配置) 按 y 下次新建项目即可直接选择上一次配置好的模板;
新建完毕项目
项目骨架图
启动项目: NPM/cnpm run serve 即可启动本地服务 到此 vue 项目新建完毕!!!!
来源: http://www.bubuko.com/infodetail-3682106.html