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

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

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

 

初始化项目

?

1	vue create demo

选项

?

1 2 3 4

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

手动选择技术

space(空格) 是选中 选择项

?

1 2 3 4 5 6 7 8 9 10 11

? 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版本

?

1 2 3

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

 选择模式

?

1 2 3 4

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

 选择预编译

?

1 2 3 4 5

? 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

 配置文件

?

1 2 3

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

 保存选中的功能

?

1 2 3

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

 保存好的配置记录

?

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

 初始化完成　

?

1 2 3 4 5 6 7

🎉  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

删除默认的路由配置

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

?

1 2 3 4 5

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

　　

删除文件

?

1 2 3 4

- 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'

?

1 2 3 4 5 6

* {   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 操作学习