0
点赞
收藏
分享

微信扫一扫

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


 一、git 代码托管平台

1)注册登录:Gitee - 基于 Git 的代码托管和研发协作平台

2)在码云上传本地已存在项目:

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

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

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

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的代码模板

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

{
	"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"; // 引入公共初始样式

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

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

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



举报

相关推荐

0 条评论