vue3.0的环境配置从入门到精通,看完就会

1、安装准备

去nodejs官网下载

选择对应的版本

2、检测成功

cmd 检查安装结果

node -v
npm -v

3、npm使用淘宝镜像

3.1.临时使用

npm --registry https://registry.npm.taobao.org install express

3.2.持久使用

npm config set registry https://registry.npm.taobao.org

配置后可通过下面方式来验证是否成功:

npm config get registry
或
npm info express

3.3 安装cnpm,也可以先不用安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

测试:

cnpm -v  

查看npm源,如图:

4、vue cli 脚手架安装

npm install -g @vue/cli --registry https://registry.npm.taobao.org

如果报错:

解决：

1 、删除npmrc文件，删除C:\Users\Administrator.npmrc文件
2、 C:\Users\Administrator\AppData\Roaming\npm-cache 清空，
3、删除项目下：node_modules，
4、用命令清理，控制台输入：

npm cache clean –force

然后重新打开cmd再一次install，成功。

npm install -g @vue/cli

4.1、vue cli 创建项目

1. 方法一 脚手架搭建:

vue create 项目名

2）方法二 vite搭建,Vite 是由 Vue 作者尤雨溪开发的一套一种新的、更快地 web 开发工具

npm init vite hello-vue3 -- --template vue

#初始化vite
npm init vite@latest
输入项目名
选择用什么创建(vue,reat,ts......)
进入项目              cd 项目
下载依赖包     npm i
启动项目:   npm run serve

推荐vscode插件
volar(1.代码右上角有个分层,2.还阔以pug)

3. 方法三 可视化创建

vue ui

4.2、vue cli 选择

创建的一般选择:

是否使用带历史纪录的路由，这里一般是Y


依赖存放与哪个文件下，当然是package.json

4.3、启动项目和打包项目

npm run serve

打包项目

npm run build

4.4 、创建 vue.config.js 配置文件

// vue.config.js
module.exports = {
  outputDir: 'dist', // 打包的目录
  lintOnSave: true, // 在保存时校验格式
  productionSourceMap: false, // 生产环境是否生成 SourceMap
  devServer: {
    open: true, // 启动服务后是否打开浏览器
    overlay: { // 错误信息展示到页面
      warnings: true,
      errors: true
    },
    host: '0.0.0.0',
    port: 8066, // 服务端口
    https: false,
    hotOnly: false,
    // proxy: { // 设置代理
    //   '/api': {
    //     target: host,
    //     changeOrigin: true,
    //     pathRewrite: {
    //       '/api': '/',
    //     }
    //   },
    // },
  },
}

4.5 、 Vue插件,Vue.js devtools,F12打开

未完待续…