vue笔记整理

• 一、创建项目的几种方式
• • 1、用vue cli创建
  • • 1.1、使用vue cli环境前提条件是先安装node和cli
    • 1.2、创建项目格式：
    • 1.3、 启动项目
  • 2、npm init vue@latest安装最新版vue3命令：
• 二、vscode需要安装的插件
• 三、通过vue.config.js 配置跨域
• 四、VScode引入vue后，自动检测助手报错：Incorrect Target

一、创建项目的几种方式

1、用vue cli创建

**vue cli底层用webpack搭建的,此种方式创建vue3适合新手过渡用 **

1.1、使用vue cli环境前提条件是先安装node和cli

node -vv16.13.0
npm -v8.1.0
vue -V@vue/cli 4.5.15 

1.2、创建项目格式：

vue create 项目名
1、 有三个选项，可选择用 vue 2 或者 3 或者自定义(Manually select features)创建项目

2、 选择创建项目
以下选项 使用方向键切换，空格键选择/取消，回车键下一步安装

*babel 使用webpack的配置把高级语法转为低级语法打包，必选；
typescript 微软 的一套脚本语言，比JS更强大，即TS；
Progressive Web App （PWA）Support 渐进式的文本框架；
*Router 路由 正式项目必选
*Vuex 状态管理模式+库，正式项目必选
*css Pre-processors 预处理器，比如less 必选
Linter / Formatter 代码严格模式，不喜欢束缚可以不选
Unit Testing 测试相关
E2E Testing 测试相关
3、选择路由
选择vue版本页面忽略，
Use history mode for router？是否选择 history 模式路由（兼容性差），应输入N（否）
4、 选择vue版本和预处理器模式，
预处理器选择一般选less：

5、如果第2项选择了ESlint（编码规范），还会有两个选项，1规范选项建议选：Standard config；格式检查选项：2格式检查选项：lint on save （保存时格式检查）
6、 选择第三方包配置文件的位置

In dedicated config files 创建独立的文件
In package.json 统一放入 package.json 文件

建议选第一个，创建独立文件，否则 package.json 文件中会内容多而乱。

7、选择是否把上面配置保持，以便下次直接使用，如果输入n 显示项目创建过程；如果输入y，则会提示输入一个保存名称：

8、vue 项目中目录构成
8.1 node_modules 系统生成的第三方包
8.2 public 公共文件，比如图标，html基本设置等（heard设置lang和charset）
8.3 src文件夹 是最主要的
assets 存放静态资源文件的文件夹，比如css样式表，图片资源
components 自定义封装的组件文件夹
main.js 是项目的入口文件，整个项目的运行要先执行 main.is
App.vue 是项目跟组件
router 路由文件夹
store vuex 库
views 页面文件夹

1.3、 启动项目

npm run serve

2、npm init vue@latest安装最新版vue3命令：

此方式是目前官网推荐的方式:

  npm init vue@latestcd npm installnpm run dev

二、vscode需要安装的插件

必装插件
vue Language Features(volar) vue语言扩展
vue 语言和语法的突出显示
可选
vetur vue语法高亮（可能与上面的插件冲突）
vue3-snippets 基于最新的 Vue 2 的 API 添加了Code Snippets
vue3-snippets-for-vscode 适配 Vue3 Api 的 snippets 插件
Auto close Tag 自动写闭合标签

安装以上插件后，输入"<" 选择第一项"

三、通过vue.config.js 配置跨域

创建项目后，在根目录下有vue.config.js 文件，打开后增加配置项运行跨域和服务启动端口，最后 vue.config.js 完整配置是：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,//  下面是增加配置项目devServer: {port: 1016,   // 服务启动端口// open: true,// 设置代理proxy: {  //配置跨域'/api': {target: 'http://192.168.4.72:1017',  //这里后台的接口地址// ws: true,changOrigin: true,  //允许跨域// pathRewrite: {// "^/api": "" //这里理解成用'/api'代替target里面的地址,比如我要用'https://www.baidu.com/user/add'，直接写'/api/user/add'即可//         }}},// overlay: {//   warnings: false,//   errors: true// }},
})

四、VScode引入vue后，自动检测助手报错：Incorrect Target

报错信息如下：

解决方案：在项目的 jsconfig.json 中配置 target 属性，值为项目中 Vue 版本：

{"compilerOptions": {
...},// --- 增加配置项"vueCompilerOptions": {"target": 2.7}

目前用vue2会遇到这个问题，vue3不知道有没有这个报错。