用vue开发新项目的前期步骤流程

目录

一、git 代码托管平台

二、搭建vue项目环境

三、在VScode中创建.vue的代码模板

四、整理项目下的主要文件和作用:

1）项目下文件的作用

2）清除 assets 和 components 下的文件图片；修改index.js中路径和名称。

3）修改routes下的index.js文件内容。

4）修改App.vue文件

5）书写css文件可以安装 less 或者 scss 

五、main.js 引入需要的全局文件（Vant element-ui等）

六、分析项目结构创建基本组件

七、其他

常用插件稳定版本：

---

一、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 bootstrap@4.6.0
import "bootstrap/dist/css/bootstrap.css"

@vue/cli脚手架：yarn global add @vue/cli@4.5.15
Vue 框架：yarn add vue@2.6.11
Vue-router路由管理器：yarn add vue-router@3.5.1
Vuex 容器：yarn add vuex@3.5.1
Vant组件库：yarn add vant@2.12.15
less-loader加载器：yarn add less-loader@5.0.0 -D
postcss-pxtorem px转rem:yarn add postcss-pxtorem@5.1.1
screenfull全屏插件：npm i screenfull@5.1.0
xlsx表格插件：npm i xlsx@0.17.0