VUE CLI脚手架搭建项目流程

VUE CLI脚手架搭建项目流程

一 安装node环境

二 安装vue的cli脚手架环境

2.1 脚手架的概述

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 搭建交互式的项目脚手架。

• 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。

• 一个运行时依赖 (

  @vue/cli-service
  

  )，该依赖：

  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。

• 一个丰富的官方插件集合，集成了前端生态中最好的工具。

• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject

脚手架基本概念

1. 把.vue翻译成浏览器可以识别的内容
2. 自动刷新浏览器
3. 自动压缩代码
4. 自动的把js翻译为低版本的js
5. 作为代理服务器
6. 等

=> 单文件组件 xxx.vue 浏览器默认识别不了 需要借助脚手架工具 Vue-cli

单文件组件 => 用一个文件能够包含组件的所有内容 **( 样式 / 结构 / 逻辑 )

2.2 脚手架的安装

官网

安装

1. 在小黑窗中输入npm install -g @vue/cli, 在任意的路径都可以

2. 下图表示安装成功 =>

image.png

3. 安装失败的解决方案

   1. 更换网络环境：有线，换无线，无线换4G

   2. 更换安装的工具

      1. cnpm ：cnpm install -g @vue/cli

      2. yarn :yarn global add @vue/cli

   3. 清除npm缓存之后，重新安装

      1. npm cache clean -f

      2. 重新执行安装的命令

4. 命令查看是否成功 vue --version

三 基于cli创建vue项目

3.1 Vue-cli项目创建

传送门

<1> Vue-cli项目创建的命令

vue create 项目名

<2>运行以下命令来创建一个新项目：

vue create hello-world

说明

1. 创建之后会多一个项目文件夹，路径不要乱选

2. 项目名不要有中文，不要有大写字母，尽可能有意义

<3> 弹出的对话框先选择默认的选项 => 按enter键

image.png

<4> 等进度条走完 提示如下显示说明成功

image.png

3.2 npm i 安装第三方包

安装报错的分析与解决

1. 网络问题

2. 终端的权限问题；新建管理员模式的终端

3. 当前这个文件夹，这个文件被其他软件占用：关闭所有可能影响的软件（重启）

4. npm包管理工具的问题:

   1. 用yarn来安装

   2. 执行npm cache clean -f 在重新创建项目

5. 创建项目时，由于到了第三方模块，文件太多 , git认为没有必要管，提示你一下

   vue-cli创建项目时，已经设置了git忽略文件 就在.gitignore中 , 可以在里面设置也可以直接忽略

image.png

3.3 进入项目文件夹 运行项目

(1) cd 项目名

(2) npm run serve

出现如下显示说明成功

image.png

3.4 Vue-cli项目结构说明

（一 基本结构）

image.png

index.html页面的作用是把vue实例放置在页面中,一般不在此写东西

写脚手架的目标的就是把逻辑和组件从html文件中抽取出来

vue-cli文件组成

1. main.js 主要的文件，所有和顶级vue实例相关的都放到这里

2. App.vue 最顶级的组件，仅次于 Vue实例，看到的顶级页面结构一般放在这里

3. components 组件的文件夹

4. assets 静态资源

（二 src目录结构）

image.png

1. main.js中

   1. 创建了最外层的Vue实例

   2. 把App.vue这个组件，当做Vue实例内部的最顶级组件并渲染出来

   3. 与public/index.html 中的那个id为app的div关联起来

2. App.vue 最顶级的那个组件，仅次于Vue实例

   1. App.vue是Vue实例的第一个组件,也是最顶级的组件,仅此于vue实例 Root

3. components组件文件夹，除了APp.vue之外的组件，都写到这个文件夹中

   1. 组件的逻辑直接写在component的xxx.vue文件里

4. assets静态资源文件夹

   1. 静态资源放到assets文件夹下面，直接使用对应路径即可引入

   2. CSS样式文件也在assets文件夹中 , 其有两种引入css文件的方式

<方式一> 在单文件组件App.js的style标签中引入

<方式二> 在main.js中引入

import './assets/base.css';

（三 mian.js文件详解 ）

// 导包的语法 
// 可以等同于 const Vue = require('vue')
// 可以等同于 const App = require('./App.vue')  =>App.vue为单文件组件
// import 是es6中新的模块化语法 意为导包

import Vue from 'vue'
import App from './App.vue'

// 导入样式
import './assets/base.css'

// 导入组件
import niupi from './components/niupi.vue'

// 注册组件
Vue.component('niupi', niupi)

// 是否打印终端信息 默认值是 true
Vue.config.productionTip = false

// 创建Vue实例
new Vue({
  // 对应的是`public/index.html` 这里面是顶级vue实例设置的dom元素(通俗理解就是把vue实例放到html文件中) 一般不写代码在此
  el: '#app',
  // 把App.vue这个组件，渲染到Vue实例中
  render: h => h(App)
})
// .$mount('#app')

render的作用就是把App.vue这个组件渲染到Vue实例中

在浏览器开发者插件Vue中的Root表示Vue实例 是根节点 Root包含着不同的组件,这个App.js为第一个组件

这也是main.js的作用 =>把App.js组件与Vue实例关联起来

3.5 安装(下载)路由

1.打开另一个cmd窗口,输入命令 npm i vue-router
2.出现下图说明路由安装成功

image.png

3.在main.js文件内初始化 (设置) 路由

#### 1.导入路由
import VueRouter from 'vue-router'  => 等价于const VueRouter = require('vue-router‘)

#### 2.use一下 =>脚手架中必须通过Vue.use 把路由设置上去
`Vue.use(VueRouter)` =>[出处](https://router.vuejs.org/zh/installation.html)

#### 3.导入子组件,写路由规则
<1> 导入子组件
import results from './components/results.vue
 <2> 写路由规则
const routes =[
  {
    path:'/results',
    component:results
  }
]

#### 4.创建路由对象
const router = new VueRouter({
   routes
})

#### 5.将路由设置给Vue实例
// 设置给vue实例
new Vue({
  render: h => h(App),
  // 把路由设置上来(挂载)
  router

}).$mount('#app')

4.路由懒加载
具体做法

4.1. 在router.js中 , 组件的导入时，使用const Foo = () => import('./Foo.vue')即可实现懒加载
4.2. 当设置路由懒加载后 , 在请求不同路由时，加载这个路由对应的js和css，首次的加载量少了，首次速度快一些

原来的在router.vue中是通过 import语法导入组件的 如下

// 导入组件
import index from '../views/index.vue'
import login from '../views/login.vue'

为了让第一次打开页面加载速度快一些 , 用以下方式导入组件 , 实现路由懒加载

// 实现路由懒加载，代码拆分

const index = () => import('../views/index.vue')
const login = () => import('../views/login.vue')

// 嵌套路由组件
const users = () => import('../views/users.vue')
const roles = () => import('../views/roles.vue')
const rights = () => import('../views/rights.vue')

5.路由的抽取
<1>在router.js中
1.导入vue到router.js中
2.进行路由初始化 my-vueRouter
3.记得要暴露路由 export default router;
4.匹配路由规则

// 导入vue
import Vue from 'vue';

// 初始化路由
// 1.导入路由
import VueRouter from 'vue-router'
  
// 2.use一下
Vue.use(VueRouter)
  
// 3.导入组件
import login from '../views/01-login.vue';
import index from '../views/02-index.vue';
  
// 4.定义路由规则
const routes = [
  { path:'/login', component:login },
  { path:'/index',component:index}
]
   
// 5.实例化路由对象
const router = new VueRouter({
    routes
})

// 6.把路由暴露出去
export default router;

<2>在main.js中

1.导入路由
import router from './router/router';
2.将路由挂载到vue实例上
new Vue({
  render: h => h(App),
  // 挂载路由到vue实例上
  router
}).$mount('#app')

3.6 使用css预编译

定义样式时,会写很多重复性代码,而修改起来很麻烦,为了更有效率写css,人为开发新语法,以适应前端开发日益复杂化和工程化的需要. 这个新的语法有三种，除了有less，还有sass和stylus. 这些新的语法写出来的代码，浏览器是不能解析的，所以这些代码写完之后，还需要用工具转化成正常的css代码，才能使用，这样去编写css代码就叫做css预编译。

传送门

（1） 导包

你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好，内置的 webpack 仍然会被预配置为可以完成所有的处理。你也可以手动安装相应的 webpack loader：

# Sass
npm install -D sass-loader node-sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus

（2） 设置 `lang="scss/less" scoped

具体说明

1. 使用less

   1. 下包 npm install -D less-loader less
   2. 在文件中定义less 有两种方式
      (1)

      3.7 导入element ui库

      npm i element-ui -S
      

      在main.js中导入element.ui库

      // 引入element ui库
      import ElementUI from 'element-ui';
      import 'element-ui/lib/theme-chalk/index.css';
      Vue.use(ElementUI);
      

      3.8 axios设置

      步骤

      1.src下新建文件夹api,里面新建文件api.js或者http.js
      2.下载axios npm i axios
      3.接口文档找到接口基地址设置

      4.根据接口文档抽取调用的接口为方法

      5.用到的地方导入这个方法

      6.import { login} from'api/http

      // 导入 axios
      import axios from 'axios';
      
      // 创建一个副本 设置基地址
      const http = axios.create({
          baseURL: 'http://localhost:8888/api/private/v1/'
      })
      
      // 暴露和接口相关的方法即可
      // 接口抽取 - 登录验证接口 
      // 用对象解构的方式定义参数
      export const login = ({username,password}) =>{
          return http.post('login',{
              username,
              password
          })
      }
      

      四 代码打包

      npm run build

      五 git代码托管 （略）

      完结

      2021 5 14