一.安装vue脚手架过程
1.安装node.js
命令行查看node和npm版本
node -v
npm -v
2.安装淘宝镜像
通过cnpm使用淘宝镜像：
npm install -g cnpm --registry=https://registry.npm.taobao.org
也可以将npm的镜像直接换成淘宝镜像，就不需要使用cnpm了
npm config set registry https://registry.npm.taobao.org
小提示：
- 查看npm镜像是否安装成功：
npm config get registry
- 查看cnpm镜像是否安装成功：
cnpm config get registry
- 如果npm镜像不想使用淘宝镜像，可以通过以下方式替换成官方镜像：
npm config set registry https://registry.npmjs.org/
- npm跟cnpm安装有些区别，cnpm安装不会生成
package-lock.json文件，cnpm的安装也不会用到这个文件，所以如果想要准确安装之前项目的具体版本信息建议使用npm安装。
3.安装webpack
cnpm install webpack@3.6.0 -g
这里的版本号可以换其他版本，不写就是安装最新版
4.安装vue.js
cnpm install vue -g
5.安装 vue-cli4
cnpm install -g @vue/cli
命令行查看webpack,vue-cli版本
webpack -v
vue -V
6.安装yarn
cnpm install -g yarn
7.vscode终端创建vue项目
vue create 项目名
8.启动项目
npm run serve
二.VueCLI3切换包管理器方法
1.找到C盘users用户下的.vuerc文件
2.修改里面的 packageManager,将其改成yarn
三.VueCLI4配置别名
1.在根目录下创建vue.config.js文件
image.png
2.编写代码
const path = require('path'); //引入path模块
function resolve(dir){
return path.join(__dirname,dir) //path.join(__dirname)设置绝对路径
}
module.exports={
chainWebpack:(config)=>{
config.resolve.alias
//set第一个参数：设置的别名，第二个参数：设置的路径
.set('@',resolve('./src'))
.set('assets',resolve('.src/assets'))
.set('components',resolve('./src/components'))
.set('views',resolve('src/views'))
}
}
三.关于vscode中禁止使用cnpm解决方案
image.png
解决方案：
- 右击VSCode图标，选择以管理员身份运行；
- 在终端中执行get-ExecutionPolicy，显示Restricted，表示状态是禁止的；
- 这时执行set-ExecutionPolicy RemoteSigned；
- 此时再执行get-ExecutionPolicy，显示RemoteSigned，则表示状态解禁，可以运行
此时在vscode的终端中就可以使用cnpm淘宝镜像了
