一、 项目搭建和准备工作
1. node和npm安装
- node和npm 官网下载安装即可
- 为了快速使用npm可以使用淘宝镜像
-
打开cmd,输入以下代码安装淘宝镜像版npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
-
在之后的使用中,npm均用“cnpm”替代
- 检测是否安装成功和检测版本信息
打开cmd,输入
node -v
npm -v
- npm的升级
npm install npm@latest -g
- node版本升级
window系统:官网下载最新版本覆盖
2. 通过vue-cli创建项目
- 安装vue-cli
npm install vue@next
-
打开控制台,输入
vue create 项目名
,创建项目
-
选择配置,然后回车
-
vue版本选择3
-
是否使用class风格的组件语法?( 如果没有选择typescript就跳过该步骤 )
根据自己需要选择即可,我选的是 y
-
使用Babel与TypeScript一起用于自动检测的填充? 这里一定要选择y ( 如果没有选择typescript就跳过该步骤 )
-
路由是否使用history模式?如果项目中存在要求就使用history(即:y),但是一般还是推荐大家使用hash模式,毕竟history模式需要依赖运维
-
选择一种CSS预处理类型,这个需要根据各个项目的要求使用那种css编译处理
-
eslint 风格,建议选择标准模式即可
-
选择校验时机,一般都会选择保存时校验,好及时做出调整
-
配置文件的存放位置,一般存放在单独的文件中
-
是否保存当前选择的配置项
如果当前配置是经常用到的配置,建议选择y存储一下当前配置项。如果只是临时使用的话就不需要存储了
-
等待安装完成
-
安装完成
3. vue项目的目录分析
public文件夹:一般放置静态资源(如:图片),webpack打包时会原封不动的打包到dist文件夹
- router / index.js
import {
createRouter, createWebHashHistory } from 'vue-router'
// 配置路由规则
const routes = [
]
// 创建路由实例
const router = createRouter({
// 使用hash路由模式
history: createWebHashHistory(),
routes
})
export default router
- main.js
// 不再引入Vue构造函数,引入的是名为createApp的工厂函数,无需通过new调用
import {
createApp } from 'vue'
// 引入根组件
import App from './App.vue'
// createApp(App):创建应用实例对象——app(类似于vue2中的vm,但app比vm更“轻”,即app没有vm那么多的方法属性等)
const app = createApp(App)
// 挂载
app.mount('#app')
4. 安装开发者工具
4.1 在线安装
打开谷歌网上应用商店,搜索vue选择对应的版本
4.2 离线安装
- 下载工具
vue3开发者工具下载 - 打开谷歌扩展程序,将下载的 .crx 工具拖入扩展程序
5. 版本管理
5.1 安装git
5.2 关联码云
- 在码云上创建项目并克隆
SSH地址
- 打开项目文件夹,右键
git bash
打开git,然后输入git remote add origin 克隆的ssh地址
5.3 提交项目到码云
// 第一步:添加当前目录下的所有文件到暂存区
git add .
// 第二步:将暂存区内容添加到仓库中
git commit -m '描述'
// 第三步:上传远程代码并合并
git push
// 首次可能需要强制提交,之后直接使用 git push 即可
git push -u origin master -f
5.4 码云创建分支
- 创建子组件时可在码云上创建一个分支,这样利于维护,最后需要合并分支
/*把线上分支拉入本地,在本地写好后再提交并与主分支融合*/
git pull
/*进入分支*/
git checkout 分支名
/*分支完成后先提交再与主分支融合(合并)*/
/*切换到主分支master上*/
git checkout master
/*分支与主分支融合*/
git merge origin/分支名
/*再次提交*/
git push
6. 样式设计
- 在css中使用 @指代src时,要使用
~@
6.1 样式重置与公用
- 重置样式
- 执行
cnpm i normalize.css
安装重置样式的包,然后在main.js
导入 normalize.css 即可
// main.js
// 重置样式
import 'normalize.css'
- 公用样式
新建文件src/assets/styles/common.css
在该文件写入常用的样式,然后在main.js
导入即可。
/* 重置样式 */
* {
box-sizing: border-box;
}
html {
height: 100%;
font-size: 12px;
}
body {
height: 100%;
color: #333;
min-width: 1240px;
font: 1em/1.3 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI',
'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei',
sans-serif;
}