新能源网站开发,wordpress 迅雷下载,宁波网站设计推荐荣盛网络,免费视频网站大全文章目录一、插件安装1. vue-router2. vuex3. element-plus4. axios5. sass二、Yarn 常用命令2.1. 添加依赖包2.2. 将依赖项添加到不同依赖项类别2.3. 升级依赖包2.4.移除依赖包2.5.安装package.json里的包依赖三、Vite3.1. 简述3.2. 全局安装vite3.3. 创建项目3.4. 下载依赖3.…
文章目录一、插件安装1. vue-router2. vuex3. element-plus4. axios5. sass二、Yarn 常用命令2.1. 添加依赖包2.2. 将依赖项添加到不同依赖项类别2.3. 升级依赖包2.4.移除依赖包2.5.安装package.json里的包依赖三、Vite3.1. 简述3.2. 全局安装vite3.3. 创建项目3.4. 下载依赖3.5. 运行项目3.6. 安装路由3.7. 安装vuex3.8. 安装sass3.9. main.js一、插件安装 安装项目生产依赖 -S 所有环境都需要依赖 安装项目开发依赖 -D 只有开发环境需要 1. vue-router
yarn add vue-routernext -S2. vuex
yarn add vuexnext -S3. element-plus
yarn add element-plus -S4. axios
yarn add axios -S5. sass
yarn add sass -Dyarn create vitejs/app manager-fe二、Yarn 常用命令
2.1. 添加依赖包
yarn add [package] // 会自动安装最新版本会覆盖指定版本号
yarn add [package] [package] [package] // 一次性添加多个包
yarn add [package][version] // 添加指定版本的包
yarn add [package][tag] // 安装某个tag比如beta,next或者latest2.2. 将依赖项添加到不同依赖项类别
不指定依赖类型默认安装到dependencies里你也可以指定依赖类型分别添加到 devDependencies、peerDependencies 和 optionalDependencies
yarn add [package] --dev 或 yarn add [package] -D // 加到 devDependencies
yarn add [package] --peer 或 yarn add [package] -P // 加到 peerDependencies
yarn add [package] --optional 或 yarn add [package] -O // 加到 optionalDependencies2.3. 升级依赖包
yarn upgrade [package] // 升级到最新版本
yarn upgrade [package][version] // 升级到指定版本
yarn upgrade [package][tag] // 升级到指定tag2.4.移除依赖包
yarn remove [package] // 移除包
2.5.安装package.json里的包依赖
yarn 或 yarn install // 安装所有依赖三、Vite
3.1. 简述
vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具它具有以下特点
快速的冷启动 即时的模块热更新 真正的按需编译 vite 的使用方式 同常见的开发工具一样vite 提供了用 npm 或者 yarn 一建生成项目结构的方式使用 yarn 在终端执行
3.2. 全局安装vite
npm install create-vite-app -g3.3. 创建项目
yarn create vite-app project-name3.4. 下载依赖
yarn3.5. 运行项目
yarn dev即可初始化一个 vite 项目默认应用模板为 vue3.x生成的项目结构十分简洁
|____node_modules
|____App.vue // 应用入口
|____index.html // 页面入口
|____vite.config.js // 配置文件
|____package.json
执行 yarn dev 即可启动应用
3.6. 安装路由
npm install vue-routernext -S# or
yarn add vue-routernext -S安装路由并且配置路由文件
history: createWebHashHistory() hash 模式 history:createWebHistory() 正常模式 src/router/index.js
import { createRouter,createWebHashHistory } from vue-routerconst router createRouter({history:createWebHashHistory(),routes:[{path:/Home,name:name,component:()import(../pages/Home.vue)}],
})export default router
3.7. 安装vuex
npm install vuexnext -S# or
yarn add vuexnext -S配置文件(src/store/index.js)
import { createStore } from vuexexport default createStore({state:{test:{a:1}},mutations:{setTestA(state,value){state.test.a value }},actions:{},modules:{}
})
3.8. 安装sass
npm install sass -D# or
yarn add sass -D3.9. main.js
src/main.js
import { createApp } from vue
import App from ./App.vue
import router from ./router
import store from ./store
import ./index.csscreateApp(App)
.use(router)
.use(store)
.mount(#app)# or
const app createApp(App)
app
.use(router)
.use(store)
.mount(#app)
