vue 之 如何搭建项目(脚手架+gitee)

一. vuecli 之 脚手架的介绍和安装(vue3.x创建vue2.x项目)

二.VueCLI3创建项目和目录结构与配置信息详解

 

初始化项目

vue create demo　　

选项

? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features     手动选择技术　　

手动选择技术

space(空格) 是选中 选择项

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version     # 选择版本
 (*) Babel                  # babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router                  # 路由配置
 ( ) Vuex
 (*) CSS Pre-processors      # 预编译 => less
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing 

选择vue版本

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview) 　

 选择模式

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)   # 输入 => n
路由有两种模式 : 
- hash模式      : 带#
- history模式   : 不带#　　

 选择预编译

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus  

 配置文件

? Where do you prefer placing config for Babel, ESLint, etc.?
>  In dedicated config files  # 把配置文件 生成到单独的文件中
   In package.json        # 配置在 package.json 里面

 保存选中的功能

? Save this as a preset for future projects? (y/N) 
 输入  y  => 保存 => 输入名称
 输入  n  => 不保存　　

 保存好的配置记录

C:\Users\zmztya.vue.rc 里面

 初始化完成　

🎉  Successfully created project hmpc-79.
👉  Get started with the following commands:

 $ cd hmpc-79
 $ yarn serve
 
 ==> 运行 : yarn serve　　

 

 整理项目文件

为了更好的实现后面的操作，我们把整体的目录结构做一些调整。

目标:

1. 删除初始化的一些默认文件

2. 修改没删除的文件

3. 新增我们需要的目录结构

修改文件

main.js不需要修改

router/index.js

删除默认的路由配置

import Vue from 'vue'
// 准备工作1 : 引入
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
]
// 准备工作2 : 实例路由
const router = new VueRouter({
  routes
})

// 导出
export default router　　

 app.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

　　

删除文件

- src/views/About.vue
- src/views/Home.vue
- src/components/HelloWorld.vue
- src/assets/logo.png

 新增目录

src/styles/ 目录

• 新增base.less 文件，设置全局样式

• 在 main.js 中加载全局样式 import './styles/base.less'

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

• src/assets目录

  • 新增项目使用的素材

• src/utils 目录

  • 工具

• src/api目录

  • 请求接口数据

• 在根目录下 添加vue.config.js 配置文件　

module.exports = {
    devServer : {
        open : true
    }
}

　

git 操作学习