一、git 代码托管平台
1）注册登录：Gitee - 基于 Git 的代码托管和研发协作平台
2）在码云上传本地已存在项目：
编辑
编辑
3）安装git:：https://git-scm.com/
4）克隆码云上的项目到本地：git clone 仓库地址
5）搭建项目环境
6）将代码上传到gitee.com的仓库中：git的使用，查看另外一篇文章
二、搭建vue项目环境
1）安装node.js，一般node都自带npm包管理工具
2）使用npm全局安装webpack：npm i webpack -g
3）安装vue-cli脚手架 ：npm install/uninstall –g @vue/cli
（ –g是全局安装，同一台电脑上安装一次即可； 安装完后，用vue -V检测是否安装成功）
4）创建项目文件夹。vue init webpack 项目名称，然后会出现一些选择项，可根据自己的需要进行选择。(vue2/vue3/less/scss/...)
环境准备：直接下载安装包 或 npm i -g yarn 在配置环境变量
1. 初始化环境：yarn init
2. 安装依赖包：yarn add webpack webpack-cli -D
3. 配置scripts(自定义命令)
"scripts": {
"build": "webpack"
或 "build": "webpack --mode production"
}5）创建项目：vue create 项目名 (不能大写中文特殊符号)
6）cd进入文件夹，安装依赖包：npm i
7）安装完成后启动项目：npm run dev
8）在浏览器的地址栏中输入localhost:8080，查看是否启动成功。
9）安装谷歌插件：nhdogjmejipd_5.3.4....crx
下载VScode插件：Vetur-PineWu; VueHelper-oysun
10) 清除 assets 和 components 下的文件 图片，初始化App.vue的代码
三、在VScode中创建.vue的代码模板
编辑
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
"<div class='$2'>$5</div>",
"</template>",
"",
"<script>",
"export default {",
"components: {},",
"data() {",
"return {}",
"},",
"methods: {}",
"}",
"</script>",
"<style scoped>",
"$4",
"</style>"
],
"description": "Log output to console"
}
}四、整理项目下的主要文件和作用:
1）项目下文件的作用
1. node_modules –下载的第三方包
2. public/index.html –浏览器运行的网页
3. src/main.js 全局配置，js打包入口；
4. App.vue –Vue页面入口，也是router出口处；
4. package.json –依赖包列表文件
5. bable.config.js：bable 配置
6. package：依赖包列表
7. components：所有的组件放在该文件夹下，除了App.vue（顶层组件）
8. router：路由配置
9. assects：静态资源（一般放css/js/styl/img等）；
mian.js、App.vue、index.html 之间的关系？
mian.js：项目打包入口，进行Vue初始化
App.vue：Vue页面主入口
index.html ：浏览器运行的文件
mian.js 引入=> App.vue 插入到=> index.html
2）清除 assets 和 components 下的文件图片；修改index.js中路径和名称。
3）修改routes下的index.js文件内容。
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home/home'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
}
]
})4）修改App.vue文件
<template>
<div id="app">
<!-- 路由出口 -->
<router-view />
</div>
</template>
<script>
export default {
name: "App",
};
</script>
<style scoped>
</style>5）书写css文件可以安装 less 或者 scss
安装完后，重启项目。
五、main.js 引入需要的全局文件（Vant element-ui等）
import Vue from "vue";
import App from "./App.vue";
import router from "./router"; // 路由对象
import "@/styles/common.css"; // 引入公共初始样式六、分析项目结构创建基本组件
1、创建one组件：组件的导入、创建、使用
</template>
</div>
<one />
</div>
</template>
<script>
import one from "../../components/my.vue";
export default {
components: {
one,
}
}七、其他
动态样式、过滤器、计算属性、侦听器、组件通信父子传值
axios、vue-router路由系统、路由守卫、组件库的使用
常用插件稳定版本：
安装命令：yarn add axios
导入命令：import axios from "axios";
Bootstrap：yarn add [email protected]
import "bootstrap/dist/css/bootstrap.css"
@vue/cli脚手架：yarn global add @vue/[email protected]
Vue 框架：yarn add [email protected]
Vue-router路由管理器：yarn add [email protected]
Vuex 容器：yarn add [email protected]
Vant组件库：yarn add [email protected]
less-loader加载器：yarn add [email protected] -D
postcss-pxtorem px转rem:yarn add [email protected]
screenfull全屏插件：npm i [email protected]
xlsx表格插件：npm i [email protected]