vue 3工程化

 

webpack先打包 再启动开发服务器 访问开发服务器时 会把打包好的结果直接给过去
vite 基于浏览器的原声的ES Module 不需要预先打包 直接启动开发服务器 请求到对应模块再编译
下载 node 
查看版本
node -v 
初始化 项目
npm init
npm init -y

package.json
文件
{
  "name": "testinit",
  "version": "0.1.0",
  "description": "初始化项目npm init 练习",
  "main": "index.js",
  "scripts": {
    "dev": "node index"
  },
  "author": "",
  "license": "ISC",
  "keywords": []
}

main 主入口文件 
scripts 指定运行的脚本命令的缩写
type 配置node 对 cjs 和esm的支持
加 index.js console.log('你好')
npm run dev 打印
CJS(CommonJS) Node 默认支持了该规范
ESModule 他是 ES6 推出的

获取镜像源
npm config get registry
https://registry.npmmirror.com/
设置镜像源

npm config set registry https://registry.npmmirror.com/

安装运行依赖-生产依赖
npm install --save 
npm install -S
安装到这里了
dependencies
安装开发依赖
npm intall --save-Dev
npm install -D
安装到这里了
devDependencies

  全局安装
  npm install --global

  根据版本安装

　npm install vue@2.6.14

  更新全部的包

  npm update

  更新指定的包

  npm update vue

　本地卸载

　npm uninstall vue

  全局卸载

  npm  uninstall 

全局安装
npm install --global vue

查看兼容性

"es6" | Can I use... Support tables for HTML5, CSS3, etc

 

create vite 项目比较基础

npm create vite

 构建后的项目结构 

 

 

 

Create Preset

Create Preset 是 Awesome Starter 的 CLI 脚手架，提供快速创建预设项目的能力，可以创建一些有趣实用的项目启动模板，也可以用来管理的常用项目配置。

Awesome Starter (github.com)

Create Preset | Create Preset

 

 

npm create preset

 

preset 项目结构

 

也可以使用 vue/cli 创建项目
全局安装 cli
npm install -g @vue/cli

vue create hello-vue3
项目结构

 

安装 Vue CLI 后，你就可以使用 vue ui 命令来启动 Vue UI

还可以使用vue ui创建项目

直接cmd vue ui 就可以打开

tsconfig.json 说明

 

prettier 格式美化工具

Prettier 中文网 · Prettier 是一个“有态度”的代码格式化工具

安装完后 需要 新增 该文件 .prettierrc

 文件初始内容如下

{
  "semi": false,
  "singleQuote": true
}

 

eslint 代码检查

配置规则 - ESLint 中文网 (nodejs.cn)

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    '@vue/standard',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

 

vscode 插件
显示中文
Chinese(Simplified)
Volar
提供了Vue3语言的支持 TypeScript 代码检查 vue-tsc 类型检查功能
ts 就可以实现代码模板

代码标签闭合

Auto Close Tag

Auto Rename Tag

EditorConfig For VSCode

Prettier for VSCode

ESLint for VSCode