如何安装vue脚手架

一.安装vue脚手架过程

1.安装node.js

https://nodejs.org/en/

命令行查看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 [email protected] -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

解决方案：

1. 右击VSCode图标，选择以管理员身份运行；
2. 在终端中执行get-ExecutionPolicy，显示Restricted，表示状态是禁止的；
3. 这时执行set-ExecutionPolicy RemoteSigned；
4. 此时再执行get-ExecutionPolicy，显示RemoteSigned，则表示状态解禁，可以运行

此时在vscode的终端中就可以使用cnpm淘宝镜像了