项目介绍

基于vue3.0+javascript去搭建一个项目原型

项目内容

1. 项目开发配置
2. 项目目录梳理

项目准备

• Vue3.x
• VueCli@4.x
• Element Puls
• Gitee仓库

项目工具使用

• Hbuilder X
• node.js
• TypeScript
• git

项目开始

创建项目

打开Hbuilder X点击下面的内置终端输入vue ui

1. 创建项目-详情

2. 创建项目-手动

3. 创建项目-功能

4. 创建项目-配置

5. 开启项目

• 等待安装好将项目拖进Hbuilder X中，打开终端定位到该项目
• npm install 下载配置包
• npm run serve去运行项目，在package.json文件中找到"scripts"将其中的"serve"改为"dev"就可以使用npm run dev运行项目了
• 开启成功在浏览器输入http://localhost:8080/如下所示即成功。

package.json

可以理解为模块管理文件：
dependencies：项目运行所依赖的模块，运行模式-S
devDependencies：项目开发所需要的模块，开发模式-D

所有在开发中下载的外部模块都会记录在package.json中，以保证项目迁移过程中不需要添加node_modules这个文件夹。

description：项目描述
author：作者
但是README.md这个文件也可以作为描述文件去使用，所以package.json保持精简即可

6. 绑定远程仓库

在gitee或者github去创建一个自己的仓库，创建完成之后，终端找到项目路径

git remote add origin git@gitee.com:blingzf666/admin-ts_blingzf.git
git push -u origin master
复制代码

这里绑定需要输入ssh验证，参考使用ssh

项目配置

1. vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
这个文件应该导出一个包含了选项的对象：

module.exports = {
  publicPath: "/",
  assetsDir: "static",
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    port: 8088,
    open: true,
    overlay: true,
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://127.0.0.1:3000',
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }
  }
}
复制代码

选项

publicPath

• Type: String
• Default: ‘/’

部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。
默认，Vue CLI 会假设你的应用被部署在一个域名的根路径上，例如 https://www.my-app.com/ 。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

outputDir

• Type: String
• Default: ‘dist’

当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 –no-clean 可关闭该行为)。

请始终使用 outputDir 而不要修改 webpack 的 output.path。

assetsDir

• Type: String
• Default: ”

放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录('static')。

indexPath

• Type: String
• Default: ‘index.html’

指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。

filenameHashing

• Type: boolean
• Default: true

默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而，这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希。

lintOnSave

• Type: boolean | ‘warning’ | ‘default’ | ‘error’
• Default: ‘default’

是否在开发环境下通过eslint-loader在每次保存时lint代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。

设置为 true 或 'warning' 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。

如果你希望让 lint 错误在开发时直接显示在浏览器中，你可以使用 lintOnSave: 'default'。这会强制 eslint-loader 将 lint 错误输出为编译错误，同时也意味着 lint 错误将会导致编译失败。

设置为 error 将会使得 eslint-loader 把 lint 警告也输出为编译错误，这意味着 lint 警告将会导致编译失败。

直接设置为false,作为程序员要相信自己的代码。

devServer

• Type: Object

所有 webpack-dev-server 的选项都支持。注意：

1. 有些值像 host、port 和 https 可能会被命令行参数覆写。

2. 有些值像 publicPath 和 historyApiFallback 不应该被修改，因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。

• port: 指定端口号以侦听以下请求
• open: 告诉dev-server在服务器启动后打开浏览器。true打开默认浏览器,浏览器名称open: 'Google Chrome',打开指定浏览器。
• overlay：出现编译器错误或警告时，在浏览器中显示全屏覆盖。true为显示编译器错误。

显示警告和错误：

module.exports = {
  //...
  devServer: {
    overlay: {
      warnings: true,
      errors: true,
    },
  },
};
复制代码

• before: 提供在服务器内部先于所有其他中间件执行自定义中间件的功能。
• proxy: 有单独的API后端开发服务器并且希望在同一域上发送API请求时，代理某些URL。
• • changeOrigin：主机头的起源保持默认进行代理时，可以设置changeOrigin以true覆盖此行为。在某些情况下，例如使用基于名称的虚拟托管站点，它很有用。
• • pathRewrite + target：代理请求并修改代理值。

       '/api': {
         target: 'http://127.0.0.1:3000',
         changeOrigin: true,
         pathRewrite: {
           '^/api': ''
         }
       }
复制代码

以下配置未使用过，有需要可以了解

pages

该选项并没有理解：此选项目的是达到多入口目的，（一个系统分为多个子系统，每个子系统有单独入口），但是并没有了解到如何单独启动一个子系统，如果通过超链接去进入，个人认为还是比较鸡肋的。

runtimeCompiler

• Type: boolean
• Default: false

是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。
如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版：

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})
复制代码

transpileDependencies

• Type: Array<string | RegExp>
• Default: []

默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。

productionSourceMap

• Type: boolean
• Default: true

如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。

简单说，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位>置，所对应的转换前的位置。
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。

crossorigin

• Type: string
• Default: undefined

设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。

需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 – 直接写在模版 (public/index.html) 中的标签不受影响。

integrity

• Type: boolean
• Default: false

在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性。

需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 – 直接写在模版 (public/index.html) 中的标签不受影响。

configureWebpack

• Type: Object | Function

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  }
}
复制代码

chainWebpack

• Type: Function

是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。

css.requireModuleExtension

• Type: boolean
• Default: true

默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 false 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块。了解更多：
CSS Modules

css.extract

• Type: boolean | Object
• Default: 生产环境下是 true，开发环境下是 false

是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。

同样当构建 Web Components 组件时它总是会被禁用 (样式是 inline 的并注入到了 shadowRoot 中)。

当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS。

提取 CSS 在开发环境模式下是默认不开启的，因为它和 CSS 热重载不兼容。然而，你仍然可以将这个值显性地设置为 true 在所有情况下都强制提取。

css.sourceMap

• Type: boolean
• Default: false

是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。

2. process.env.name 运行环境配置

该process对象是global提供有关当前Node.js进程并对其进行控制的信息。作为全局变量，Node.js应用程序始终可以使用它，而无需使用require()。

在项目下通过创建.env.name的文件在其中的属性就可以被process获取到
就好比一个对象一样，在项目运行时去指定对应的name即可完成环境切换

// .env.development
VUE_APP_BASE_API = '/development'
// .env.production
VUE_APP_BASE_API = '/production'
// .env.test
VUE_APP_BASE_API = '/test'
复制代码

VUE_APP_BASE_API属性名可以自定义，后面跟着的是路径名，在前后端分离的情况下请求会出现跨域，这里虽然nginx做了代理，但是依旧需要从vue.config.js中再去做一次代理，可以理解为nginx是反向代理，vue.config.js是正向代理。

// package.json
  {
      "scripts": {
        "dev": "vue-cli-service serve",
        "test": "vue-cli-service serve --mode test",
        "build": "vue-cli-service build",
        "build-test": "vue-cli-service build --mode test"
      },
  }
复制代码

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://127.0.0.1:3000',
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }
  }
}
复制代码

npm run dev 开发环境，npm run test测试环境

3. yarn

yarn代替了npm install是因为yarn的准确性，npm装载包出现错误会被下载成功代替掉，不能很好的保证包的完整性。

更详细点击：yarn
直接在项目下运行yarn即可，完成后会生成yarn.lock

运行项目

1. 首先需要引入ui框架-Element Puls(npm install element-plus/yarn add element-plus)
2. 再引入axios(npm install axios/yarn add axios)

// package.json
{
  "name": "项目名",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve",
    "test": "vue-cli-service serve --mode test",
    "build": "vue-cli-service build",
    "build-test": "vue-cli-service build --mode test"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "element-plus": "^1.0.2-beta.44",
    "ts-node": "^10.0.0",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@types/mockjs": "^1.0.3",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5"
  }
}

复制代码

3. 下载依赖（npm run install/yarn install）防止漏装
4. 运行项目（npm run serve/yarn run serve）
5. 打开浏览器输入http://localhost:8088

项目开发

项目结构整理

项目
|-node_modules
|-public
   |-favicon.ico
   |-index.html
|-src         // 主要目录@就是代表src
   |-assets   // 静态资源
   |-components // 公共组件
   |-router 
       |-index.ts // 路由注册
   |-store
       |-modules // vuex模型对象集合
       |-index.ts // 状态管理暴露接口
   |-style // 样式目录
   |-utils // 工具目录
   |-views // 页面管理
   |-App.vue // 容器页面
   |-main.ts // 入口文件
   |-shims-vue.d.ts // ts第三方注册
|-.browserslistrc
|-.env.development
|-.env.production
|-.env.test
|-.gitattributes
|-.gitignore
|-babel.config.js
|-package-lock.json
|-package.json
|-README.md
|-tsconfig.json
|-vue.config.js
|-yarn.lock
复制代码

项目开展

|-src
   |-views // 页面管理
       |-login // 登录页面
           |-index.vue
       |-index // 管理页面容器
           |-index.vue
   |-permission.ts // 导航守卫
|-utils
   |-request.ts // axios封装并进行拦截
复制代码

至此项目框架已经完成，可以进行页面开发

玩儿就是玩儿

在对vue3.x中，已经对typescript进行了支持，但至于写法上还是有很多形式的，兼容vue2.x

以下三种写法都可以

• 对于没有接触过vue的，ts写法有益于深入ts学习，但是代码量太多不利于开发

// login.vue ts的页面写法
import { Vue } from 'vue-class-component'
export default class extends Vue {
        // dom中绑定的数据
	private formData = {
		username:'',
		password:''
	}
        // 对数据进行重置
	private reset(){
		this.formData.username = "",
		this.formData.password = ""
	}
}
复制代码

• 有接触过vue2.x的，vue支持的2.0写法

// login.vue  ts页面写法
export default {
    data(){
        return{
	    formData : {
                username:'',
                password:''
            }
	}
    },
    methods:{
        reset(){
            this.formData.username = "",
            this.formData.password = ""
        }
    }
}
复制代码

• 官方给的3.0新增写法

import { defineComponent, ref } from 'vue'

const MyModal = defineComponent({
  setup() {
    const isContentShown = ref(false)
    const open = () => (isContentShown.value = true)

    return {
      isContentShown,
      open
    }
  }
})
复制代码