Vue项目搭建

1. 搭建NodeJs环境

• 下载地址：https://nodejs.org/zh-cn/

• 检查node版本,出现版本号说明安装成功
  

   node -v
  

• 切换淘宝镜像源提高速度,以后使用 cnpm 代替 npm
  

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

1. 搭建Vue环境

• 全局安装 Vue-Cli
  

   cnpm install -g @vue/cli
  

• 查看安装的版本
  

   vue -version
  

• 版本过低
  

   npm update -g @vue/cli
  

1. 创建项目

• vue create <项目名>
• cd 该项目文件夹下
• npm run serve 运行项目

1. 项目初始化配置

• 项目运行起来自动打开浏览器
  

   --- package.json
    "scripts": {
       "serve": "vue-cli-service serve --open",
       "build": "vue-cli-service build",
       "lint": "vue-cli-service lint"
     },
  

  出现的问题-打开的网址是0.0.0.0:8080
  

   --project- vue.config.js
   module.exports = defineConfig({
     transpileDependencies: true,
     devServer: {
       host: "localhost",
       port: 8080,
     },
   });
  

• 关闭eslint校验功能
  

   --project- vue.config.js
   lintOnSave: false
  

• 配置src文件夹别名为@,@代表src文件夹,方便寻找文件
  

   --project--jsconfig.json
   {
     "compilerOptions": {
       "baseUrl": "./",
       "paths": {
         "@/*": [
           "src/*"
         ]
       }
     },
     exclude:[
     "node_modules",
     "dist"
     ]
   }