- Welcome to Journal web site.
- 开发无止境 -
Data: 2017-10-30 08:45:25Form: JournalClick: 9
Vue 项目Vite 介绍Vite 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成Vite 安装# 1、安装vite脚手架，全局安装
// yarn
yarn global add vite
// npm
npm install -g vite
# 安装完成后，需要配置环境变量，根据自己的nodejs目录进行配置路径
我的电脑-》右击-》属性-》高级系统设置-》环境变量-》系统变量-》Path-》编辑-》新建(赋值nodejs目录下的node_global路径)
D:\Program Files\nodejs\node_global\
Vite 升级# yarn
yarn global upgrade --latest vite
# npm
npm update -g vite
Vite 卸载# yarn
yarn global remove vite
# npm
npm uninstall vite -g
Vite 创建 Vue 项目# 1、创建一个项目
npm init vue@latest
# 2、需要安装create-vue@3.3.4吗？
Need to install the following packages:
create-vue@3.3.4
Ok to proceed? (y)
# 3、项目名称
Project name：
# 4、是否添加TypeScript
Add TypeScript?
# 5、是否添加JSC支持
# 5.1、JSX即JavaScript XML，是React发明的一种JavaScript的语法扩展，允许 HTML 与 JavaScript 的混写；JSX本身也是一个表达式，在编译后，JSX表达式会变成普通的JavaScript对象。
Add JSX Support?
# 6、是否为单页应用程序开发添加Vue Router路由管理组件
Add Vue Router for Single Page Application development?
# 7、是否添加Pinia组件来进行状态管理
Add Pinia for state management?
# 8、是否添加Vitest来进行单元测试
Add Vitest for Unit Testing?
# 9、是否添加Cypress来进行单元测试和端到端测试
Add Cypress for both Unit and End-to-End testing?
# 10、是否添加ESLint来进行代码质量检查
Add ESLint for code quality?
# 1、进入目录
cd vite
# 2、安装模块
# 2.1、yarn
yarn install
# 2.2、npm
npm install
# 3、启动项目
# 3.1、yarn
yarn dev
# 3.2、npm
npm run dev
| 目录名 | 作用 |
|---|---|
| node_modules | npm 加载的项目依赖模块 |
| public | 公共资源目录 |
| src | 开发目录 |
| src/main.js | 主入口文件 |
| src/App.vue | 网站首页文件 |
| src/assete | 存放静态资源：css、js、字体、图片、资源 |
| src/components | 存放通用模块组件 |
| src/router | 存放路由设置文件 |
| src/views | |
| babel.config.js | |
| package.json | |
| package-lock.json | |
| README.md | |
| ---------------------- | ---------------------------------- |
| static | 静态资源目录，如图片、字体等 |
| dist | 打包后会生成该的目录 |
| build | 项目构建(webpack)相关代码 |
Package.json 文件属性说明| 参数 | 描述 |
|---|---|
| name | 包名 |
| version | 包的版本号 |
| description | 包的描述。 |
| main | main 字段指定了程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js |
| keywords | 关键字 |
| author | 包的作者姓名 |
| scripts | 定义的脚本，脚本可以用 vue-cli 脚手架、webpack-cli 脚手架、或者自己写命令 |
| license | 代码的许可证，[MIT](https://opensource.org/licenses/MIT) 麻省理工许可证、[ISC](https://opensource.org/licenses/ISC) 开放源代码许可证 |
| homepage | 包的官网 url |
| contributors | 包的其他贡献者姓名 |
| dependencies | 依赖包列表。运行时的依赖，发布后，即生产环境下还需要用的模块。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。 |
| devDependencies | 开发时的依赖。里面的模块是开发时用的，发布时用不到它，比如项目中使用的 gulp ，压缩 css、js 的模块 |
| repository | 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上 |
// package.json文件中版本号的说明，安装的时候代表不同的含义：
"5.0.3" 表示安装指定的5.0.3版本
"~5.0.3" 表示安装5.0.X中最新的版本
"^5.0.3" 表示安装5.X.X中最新的版本
// 因为前端版本太随意了，所以要指定版本，可能1个小版本，就跟之前的不兼容了
{
"name": "ouyangke",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-airbnb": "^5.0.2",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-vue": "^7.0.0",
"lint-staged": "^9.5.0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,jsx,vue}": [
"vue-cli-service lint",
"git add"
]
}
}
main.js 入口文件main.js，有三个作用： VueCSS 样式。例如： 网络请求插件:axios 和 vue-resource、图片懒加载插件：vue-lazyload# 1、引入 vue 模块
import { createApp } from 'vue'
# 2、引入 App.vue 文件
import App from './App.vue'
# 3、引入 路由 模块
import router from './router'
# 4、createApp创建应用
# 4.1、(App) 参数，就是App.vue文件中的export default(默认导出的)
# 4.2、use() 使用Vue.js插件
# 4.3、mount() 组件挂载在DOM的ID元素上
createApp(App).use(router).mount('#app')
# 还有一些其他的链式方法：component（组件）、config（配置）、directive（指令）、mixin（混入）、provide（搭配Inject）、unmount（卸载）
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载vue.config.js 文件，默认没有该文件，可自行添加vue 配置、vuecli 配置、引入 webpack 配置
