技巧1 vue3.0+cli4.5项目快速创建流程

#技巧1 vue3.0+cli4.5项目快速创建流程

这篇是根据我自己的习惯，为的是我能快速全面的创建一个vue3项目。

不是写的创建cli项目流程哈。

vue框架

vue属于单页面程序，只有一个入口文件index.html，路由跳转不会刷新页面，运行速度快。并且不刷新，数据不会初始化，所以页面和页面之间可以共享数据。

1.创建项目

# win+R cmd
d:
cd allvue

vue create 项目名
 
选择 right3 (含 vuex 、router)

2.启动项目

cd 项目名
npm run serve

在hbuilder里打开该项目目录。

3.安装与配置插件

首先打开main.js ，把app那一串写成这种形式。

const app=createApp(App)
app.use(store)
app.use(router)
app.mount('#app')

3.1 安装axios

npm install -save axios

配置：main.js中引入axios 注意位置

// 1.引入axios
import axios from 'axios'

const app=createApp(App)

//2.axios 关联到vue实例对象的全局属性中
app.config.globalProperties.$axios=axios

app.use(store)
app.use(router)
app.mount('#app')

3.2 前端ui组件的安装（按需选择）

3.2.1安装jquery和bootstrap

@4表示bootstrap4

npm install jquery bootstrap@4 popper.js --save

配置：打开main.js

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js"

3.2.2安装element Plus

element plus组件库的安装和使用

4.建立组件目录

4.1 建立模块目录

1. src/compenents下建立模块目录
	home.vue
	common目录(以下直接复制粘贴，f2改目录名)
	goods目录
	...
2.	goods等模块目录下建立组件
	goodslist.vue(以下复制粘贴，f2改名字)
	mycart.vue
	... 其他模块目录下的组件也复制粘贴至全部完成。

<!-- 3.  复制粘贴以下内容至每个组件中一遍。 并改成自己组件名。 -->
<template>
	<div>
		<h1>本组件组件名</h1>
	</div>
</template>

<script>
	export default {
	  name: '',//本组件组件名
	  data() {
	    return {
	      arr:[],
	    }
	  },
	  created(){
		  console.log(1)
	  },
	  methods:{
		  func(){
			 	  
		  }
	  } 
	
	}
</script>

<style scoped>
    
</style>

4.2 建立引入项目图片的目录

在public下建立img,css,js三个文件夹，其中img用来放各个模块的图片，注意图片也要分模块目录区分。

图片目录：

用法：

1. 图片地址要自己选，一般是“../../public/img/xxx.jpg”
<img src="/public/img/a.jpg">
2.
<img :src="imga">
data(){
	imga:'/public/img/a.jpg'
}
3.在js里用的话就是require('../../../public...')

4.3 配置vuex 目录

分析哪个模块需要用到全局数据，分析好了按照模块划分全局数据。

在store/muduls里建立目录，按照模块划分js.

查看下面链接的 mudules目录

vuex的使用方法

5.vue默认首页改成自己的首页

router/index.js

//引入自己的主页，home.vue，
import home from "../components/home.vue"
const routes = [
    //   "/"所对应的,改成自己引入的home组件名
  {
    path: '/',
    name: 'home',
    component: home
  },
 ]

App.vue

去掉所有router-link

6.公共组件做法

有了自己的vue页面后要让几乎每个页面都加上必要的公共组件。

比如说：所有组件都应用了header.vue和footer.vue。不管是首页还是其他模块。

第一步：在router/index.js中引入公共组件。

router/index.js

// common
import header from '../components/common/header.vue' 
import footer from '../components/common/footer.vue' 

//在home页面引入header和footer,router里面配置。

const router=[
    {
    path: '/',
    name: 'home',
    components: {
    		default:home,
    		header:header,
    		footer:footer
    	}
  },
    //其他模块应用到的也这样写。
  {
    path: '/goodscate',
    name: 'goodscate',
    component: {
    		default:goodscate,
    		header:header,
    		footer:footer
    	}
  },
]

App.vue

由于页面展示的实际上是App.vue文件，<router-view/>代表的就是vue数据层主体，通过header和footer两个命名视图，可以和主体共同显示在页面上。

<template>
  <div id="nav">
	<router-view name="header"></router-view>
	<router-view/>
	<router-view name="footer"></router-view>
	
  </div> 
</template>

7.建立组件路径（router）

打开router/index.js

1.引入组件

//1.src/components下的
//例如home.vue
import home from "../components/home.vue"
import 组件名 from "../components/组件名.vue"

//2.src/components/xxx目录下的
//例如common下的header
import header from '../components/common/header.vue' 
import 组件名 from '../components/目录名/组件名.vue' 

2.给组件配置路由

（不提倡这样写，因为一般有公共组件）。

const routes = [
    //home要改成自己引入的home组件名
  {
    path: '/',
    name: 'home',
    component: home
  },
  //其他模块
  {
    path: '/goodscate',
    name: 'goodscate',
    component: goodscate
  },
  // ...
  // 嵌套父子模块写法  例如goodslist和goodsdetail
   {
	path: "/goodslist",// 父
    component: goodslist,
	children:[//给父一个chidren   子
		{
			path: "goodsdetail",//注意这里没有/
			component: goodsdetail,
		}
		]
	},
    
 ]

2.1 公共组件配置路由

如果带有公共组件，要这样配置路由：

const routes = [
    //home要改成自己引入的home组件名
  {
    path: '/',
    name: 'home',
    components: {
    		default:home,
    		header:header,
    		footer:footer
    	}
  },
  //其他模块
  {
    path: '/goodscate',
    name: 'goodscate',
    component: {
    		default:goodscate,
    		header:header,
    		footer:footer
    	}
  },
  // ...
    
 ]

2.2嵌套组件写法

嵌套组件指的是一个组件显示在另一个组件页面上，是它内部的组件，他们是父子关系，比如商品详情显示在商品列表的布局下面。这种就是嵌套组件。

// 嵌套父子模块写法  例如goodslist和goodsdetail
   {
	path: "/goodslist",// 父
    component: goodslist,
	children:[//给父一个chidren   子
		{
			path: "goodsdetail",//注意这里没有/
			component: {
    		default:goodsdeatail,
    		header:header,
    		footer:footer
    	}
		}
		]
	},

<template>
	<h2>商品列表页面</h2>
	<ul>
		<li >
		</li>
	</ul>
	<!-- 以上为商品列表的布局 -->
	<!-- 因为商品详情需要显示在这，所以在这写router-view. -->
	<router-view></router-view>
	
</template>

2.3传参占位路由写法

// goodscate.vue 要传几个参数，goodslist就占几个位
{
  	path: "/goodslist/:id/:content",
    component: goodslist,
}