Vue + TypeScript + Element 项目实践(简洁时尚博客网站)及踩坑记（中）

6. 用 vue-cli 搭建 项目

笔者使用最新的 vue-cli 3 搭建项目 详细的教程 请看我之前写的 vue-cli3.x 新特性及踩坑记 里面已经有详细讲解 但文章里面的配置和此项目不同的是 我加入了 TypeScript 其他的配置都是 vue-cli 本来配好的了。详情请看 vue-cli 官网 。

6.1 安装及构建项目目录

安装的依赖

安装过程选择的一些配置

搭建好之后 初始项目结构长这样 

├── public // 静态页面

├── src // 主目录

 ├── assets // 静态资源

 ├── components // 组件

 ├── views // 页面

 ├── App.vue // 页面主入口

 ├── main.ts // 脚本主入口

 ├── router.ts // 路由

 ├── shims-tsx.d.ts // 相关 tsx 模块注入

 ├── shims-vue.d.ts // Vue 模块注入

 └── store.ts // vuex 配置

├── tests // 测试用例

├── .eslintrc.js // eslint 相关配置

├── .gitignore // git 忽略文件配置

├── babel.config.js // babel 配置

├── postcss.config.js // postcss 配置

├── package.json // 依赖

└── tsconfig.json // ts 配置

奔着 大型项目的结构 来改造项目结构 改造后 :

├── public // 静态页面

├── src // 主目录

 ├── assets // 静态资源

 ├── filters // 过滤

 ├── store // vuex 配置

 ├── less // 样式

 ├── utils // 工具方法(axios封装 全局方法等)

 ├── views // 页面

 ├── App.vue // 页面主入口

 ├── main.ts // 脚本主入口

 ├── router.ts // 路由

 ├── shime-global.d.ts // 相关 全局或者插件 模块注入

 ├── shims-tsx.d.ts // 相关 tsx 模块注入

 ├── shims-vue.d.ts // Vue 模块注入, 使 TypeScript 支持 *.vue 后缀的文件

├── tests // 测试用例

├── .eslintrc.js // eslint 相关配置

├── postcss.config.js // postcss 配置

├── .gitignore // git 忽略文件配置

├── babel.config.js // preset 记录

├── package.json // 依赖

├── README.md // 项目 readme

├── tsconfig.json // ts 配置

└── vue.config.js // webpack 配置

tsconfig.json 文件中指定了用来编译这个项目的根文件和编译选项。

本项目的 tsconfig.json 配置如下

{

 // 编译选项

 compilerOptions : {

 // 编译输出目标 ES 版本

 target : esnext ,

 // 采用的模块系统

 module : esnext ,

 // 以严格模式解析

 strict : true,

 jsx : preserve ,

 // 从 tslib 导入外部帮助库: 比如__extends __rest等

 importHelpers : true,

 // 如何处理模块

 moduleResolution : node ,

 // 启用装饰器

 experimentalDecorators : true,

 esModuleInterop : true,

 // 允许从没有设置默认导出的模块中默认导入

 allowSyntheticDefaultImports : true,

 // 定义一个变量就必须给它一个初始值

 strictPropertyInitialization : false,

 // 允许编译javascript文件

 allowJs : true,

 // 是否包含可以用于 debug 的 sourceMap

 sourceMap : true,

 // 忽略 this 的类型检查, Raise error on this expressions with an implied any type.

 noImplicitThis : false,

 // 解析非相对模块名的基准目录 

 baseUrl : . ,

 // 给错误和消息设置样式 使用颜色和上下文。

 pretty : true,

 // 设置引入的定义文件

 types : [ webpack-env , mocha , chai ],

 // 指定特殊模块的路径

 paths : {

 /* : [ src/* ]

 // 编译过程中需要引入的库文件的列表

 lib : [ esnext , dom , dom.iterable , scripthost ]

 // ts 管理的文件

 include : [

 src/**/*.ts ,

 src/**/*.tsx ,

 src/**/*.vue ,

 tests/**/*.ts ,

 tests/**/*.tsx 

 // ts 排除的文件

 exclude : [ node_modules ]

}

更多配置请看官网的 tsconfig.json 的 编译选项

本项目的 vue.config.js:

const path require( path 

const sourceMap process.env.NODE_ENV development 

module.exports {

 // 基本路径

 publicPath: ./ ,

 // 输出文件目录

 outputDir: dist ,

 // eslint-loader 是否在保存的时候检查

 lintOnSave: false,

 // webpack配置

 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md

 chainWebpack: () {},

 configureWebpack: config {

 if (process.env.NODE_ENV production ) {

 // 为生产环境修改配置...

 config.mode production 

 } else {

 // 为开发环境修改配置...

 config.mode development 

 Object.assign(config, {

 // 开发生产共同配置

 resolve: {

 extensions: [ .js , .vue , .json , .ts , .tsx ],

 alias: {

 vue$: vue/dist/vue.js ,

 : path.resolve(__dirname, ./src )

 // 生产环境是否生成 sourceMap 文件

 productionSourceMap: sourceMap,

 // css相关配置

 css: {

 // 是否使用css分离插件 ExtractTextPlugin

 extract: true,

 // 开启 CSS source maps?

 sourceMap: false,

 // css预设器配置项

 loaderOptions: {},

 // 启用 CSS modules for all css / pre-processor files.

 modules: false

 // use thread-loader for babel TS in production build

 // enabled by default if the machine has more than 1 cores

 parallel: require( os ).cpus().length 1,

 // PWA 插件相关配置

 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa

 pwa: {},

 // webpack-dev-server 相关配置

 devServer: {

 open: process.platform darwin ,

 host: localhost ,

 port: 3001, //8080,

 https: false,

 hotOnly: false,

 proxy: {

 // 设置代理

 // proxy all requests starting with /api to jsonplaceholder

 /api : {

 // target: https://emm.cmccbigdata.com:8443/ ,

 target: http://localhost:3000/ ,

 // target: http://47.106.136.114/ ,

 changeOrigin: true,

 ws: true,

 pathRewrite: {

 ^/api : 

 before: app {}

 // 第三方插件配置

 pluginOptions: {

 // ...

};

6.2 安装 element-ui

本来想搭配 iview-ui 来用的 但后续还想把这个项目搞成 ssr 的 而 vue typescript iview Nuxt.js 的服务端渲染还有不少坑, 而 vue typescript element Nuxt.js 对 ssr 的支持已经不错了 所以选择了 element-ui 。

安装

npm i element-ui -S

按需引入, 借助 babel-plugin-component 我们可以只引入需要的组件 以达到减小项目体积的目的。

npm install babel-plugin-component -D

然后 将 babel.config.js 修改为

module.exports {

 presets: [ vue/app ],

 plugins: [

 component ,

 libraryName: element-ui ,

 styleLibraryName: theme-chalk 

};

接下来 如果你只希望引入部分组件 比如 Button 和 Select 那么需要在 main.js 中写入以下内容

import Vue from vue 

import { Button, Select } from element-ui 

import App from ./App.vue 

Vue.component(Button.name, Button);

Vue.component(Select.name, Select);

/* 或写为

 * Vue.use(Button)

 * Vue.use(Select)

new Vue({

 el: #app ,

 render: h h(App)

});

6.3 完善项目目录与文件

route

使用路由懒加载功能。

export default new Router({

 mode: history ,

 routes: [

 path: / ,

 name: home ,

 component: () import(/* webpackChunkName: home */ ./views/home.vue )

 path: /articles ,

 name: articles ,

 // route level code-splitting

 // this generates a separate chunk (articles.[hash].js) for this route

 // which is lazy-loaded when the route is visited.

 component: () 

 import(/* webpackChunkName: articles */ ./views/articles.vue )

});

utils

utils/utils.ts 常用函数的封装 比如 事件的节流 throttle 与防抖 debounce 方法

// fn是我们需要包装的事件回调, delay是时间间隔的阈值

export function throttle(fn: Function, delay: number) {

 // last为上一次触发回调的时间, timer是定时器

 let last 0,

 timer: any null;

 // 将throttle处理结果当作函数返回

 return function() {

 // 保留调用时的this上下文

 let context this;

 // 保留调用时传入的参数

 let args arguments;

 // 记录本次触发回调的时间

 let now new Date();

 // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值

 if (now - last delay) {

 // 如果时间间隔小于我们设定的时间间隔阈值 则为本次触发操作设立一个新的定时器

 clearTimeout(timer);

 timer setTimeout(function() {

 last now;

 fn.apply(context, args);

 }, delay);

 } else {

 // 如果时间间隔超出了我们设定的时间间隔阈值 那就不等了 无论如何要反馈给用户一次响应

 last now;

 fn.apply(context, args);

}

utils/config.ts 配置文件 比如 github 授权登录的回调地址、client_id、client_secret 等。

const config {

 oauth_uri : https://github.com/login/oauth/authorize ,

 redirect_uri : https://biaochenxuying.cn/login ,

 client_id : XXXXXXXXXX ,

 client_secret : XXXXXXXXXX ,

// 本地开发环境下

if (process.env.NODE_ENV development ) {

 config.redirect_uri http://localhost:3001/login 

 config.client_id 502176cec65773057a9e 

 config.client_secret 65d444de381a026301a2c7cffb6952b9a86ac235 

export default config;

如果你的生产环境也要 github 登录授权的话 请在 github 上申请一个 Oauth App 把你的 redirect_uri client_id client_secret 的信息填在 config 里面即可。具体详情请看我写的这篇文章 github 授权登录教程与如何设计第三方授权登录的用户表

utils/urls.ts 请求接口地址 统一管理。

// url的链接

export const urls: object {

 login: login ,

 register: register ,

 getArticleList: getArticleList ,

export default urls;

utils/https.ts axios 请求的封装。

import axios from axios 

// 创建axios实例

let service: any {};

service axios.create({

 baseURL: /api , // api的base_url

 timeout: 50000 // 请求超时时间

// request拦截器 axios的一些配置

service.interceptors.request.use(

 (config: any) {

 return config;

 (error: any) {

 // Do something with request error

 console.error( error: , error); // for debug

 Promise.reject(error);

// respone拦截器 axios的一些配置

service.interceptors.response.use(

 (response: any) {

 return response;

 (error: any) {

 console.error( error: error); // for debug

 return Promise.reject(error);

export default service;

把 urls 和 https 挂载到 main.ts 里面的 Vue 的 prototype 上面。

import service from ./utils/https 

import urls from ./utils/urls 

Vue.prototype.$https service; // 其他页面在使用 axios 的时候直接 this.$http 就可以了

Vue.prototype.$urls urls; // 其他页面在使用 urls 的时候直接 this.$urls 就可以了

然后就可以统一管理接口 而且调用起来也很方便啦。比如下面 文章列表的请求。

async handleSearch() {

 this.isLoading true;

 const res: any await this.$https.get(this.$urls.getArticleList, {

 params: this.params

 this.isLoading false;

 if (res.status 200) {

 if (res.data.code 0) {

 const data: any res.data.data;

 this.articlesList [...this.articlesList, ...data.list];

 this.total data.count;

 this.params.pageNum 

 if (this.total this.articlesList.length) {

 this.isLoadEnd true;

 } else {

 this.$message({

 message: res.data.message,

 type: error 

 } else {

 this.$message({

 message: 网络错误! ,

 type: error 

 }

store ( Vuex )

一般大型的项目都有很多模块的 比如本项目中有公共信息(比如 token )、 用户模块、文章模块。

├── modules // 模块

 ├── user.ts // 用户模块 

 ├── article.ts // 文章模块 

├── types.ts // 类型

└── index.ts // vuex 主入口

store/index.ts 存放公共的信息 并导入其他模块

import Vue from vue 

import Vuex from vuex 

import * as types from ./types 

import user from ./modules/user 

import article from ./modules/article 

Vue.use(Vuex);

const initPageState () {

 return {

 token: 

const store new Vuex.Store({

 strict: process.env.NODE_ENV ! production ,

 // 具体模块

 modules: {

 user,

 article

 state: initPageState(),

 mutations: {

 [types.SAVE_TOKEN](state: any, pageState: any) {

 for (const prop in pageState) {

 state[prop] pageState[prop];

 actions: {}

export default store;

types.ts

// 公共 token

export const SAVE_TOKEN SAVE_TOKEN 

// 用户

export const SAVE_USER SAVE_USER 

user.ts

import * as types from ../types 

const initPageState () {

 return {

 userInfo: {

 _id: ,

 name: ,

 avator: 

const user {

 state: initPageState(),

 mutations: {

 [types.SAVE_USER](state: any, pageState: any) {

 for (const prop in pageState) {

 state[prop] pageState[prop];

 actions: {}

export default user;

7. markdown 渲染

markdown 渲染效果图:

markdown 渲染 采用了开源的 marked 代码高亮用了 highlight.js 。

用法

第一步 npm i marked highlight.js --save

npm i marked highlight.js --save

第二步 导入封装成 markdown.js 将文章详情由字符串转成 html 并抽离出文章目录。

marked 的封装 得感谢这位老哥。

const highlight require( highlight.js 

const marked require( marked 

const tocObj {

 add: function(text, level) {

 var anchor #toc${level}${ this.index} 

 this.toc.push({ anchor: anchor, level: level, text: text });

 return anchor;

 // 使用堆栈的方式处理嵌套的ul,li level即ul的嵌套层次 1是最外层

 // ul 

 // li /li 

 // ul 

 // li /li 

 // /ul 

 // li /li 

 // /ul 

 toHTML: function() {

 let levelStack [];

 let result 

 const addStartUL () {

 result ul class anchor-ul id anchor-fix 

 const addEndUL () {

 result /ul \n 

 const addLI (anchor, text) {

 result 

 li a class toc-link href # anchor text a /li \n 

 this.toc.forEach(function(item) {

 let levelIndex levelStack.indexOf(item.level);

 // 没有找到相应level的ul标签 则将li放入新增的ul中

 if (levelIndex -1) {

 levelStack.unshift(item.level);

 addStartUL();

 addLI(item.anchor, item.text);

 } // 找到了相应level的ul标签 并且在栈顶的位置则直接将li放在此ul下

 else if (levelIndex 0) {

 addLI(item.anchor, item.text);

 } // 找到了相应level的ul标签 但是不在栈顶位置 需要将之前的所有level出栈并且打上闭合标签 最后新增li

 else {

 while (levelIndex--) {

 levelStack.shift();

 addEndUL();

 addLI(item.anchor, item.text);

 // 如果栈中还有level 全部出栈打上闭合标签

 while (levelStack.length) {

 levelStack.shift();

 addEndUL();

 // 清理先前数据供下次使用

 this.toc [];

 this.index 

 return result;

 toc: [],

 index: 0

class MarkUtils {

 constructor() {

 this.rendererMD new marked.Renderer();

 this.rendererMD.heading function(text, level, raw) {

 var anchor tocObj.add(text, level);

 return h${level} id ${anchor} ${text} /h${level} \n 

 highlight.configure({ useBR: true });

 marked.setOptions({

 renderer: this.rendererMD,

 headerIds: false,

 gfm: true,

 tables: true,

 breaks: false,

 pedantic: false,

 sanitize: false,

 smartLists: true,

 smartypants: false,

 highlight: function(code) {

 return highlight.highlightAuto(code).value;

 async marked(data) {

 if (data) {

 let content await marked(data); // 文章内容

 let toc tocObj.toHTML(); // 文章目录

 return { content: content, toc: toc };

 } else {

 return null;

const markdown new MarkUtils();

export default markdown;

第三步 使用

import markdown from /utils/markdown 

// 获取文章详情

async handleSearch() {

 const res: any await this.$https.post(

 this.$urls.getArticleDetail,

 this.params

 if (res.status 200) {

 if (res.data.code 0) {

 this.articleDetail res.data.data;

 // 使用 marked 转换

 const article markdown.marked(res.data.data.content);

 article.then((response: any) {

 this.articleDetail.content response.content;

 this.articleDetail.toc response.toc;

 } else {

 // ...

 } else {

 // ... 

// 渲染

 div id content 

 class article-detail 

 v-html articleDetail.content 

 /div 

第四步 引入 monokai_sublime 的 css 样式

 link href http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css rel stylesheet 

第五步 对 markdown 样式的补充

如果不补充样式 是没有黑色背景的 字体大小等也会比较小 图片也不会居中显示

/*对 markdown 样式的补充*/

pre {

 display: block;

 padding: 10px;

 margin: 0 0 10px;

 font-size: 14px;

 line-height: 1.42857143;

 color: #abb2bf;

 background: #282c34;

 word-break: break-all;

 word-wrap: break-word;

 overflow: auto;

h1,h2,h3,h4,h5,h6{

 margin-top: 1em;

 /* margin-bottom: 1em; */

strong {

 font-weight: bold;

p code:not([class]) {

 padding: 2px 4px;

 font-size: 90%;

 color: #c7254e;

 background-color: #f9f2f4;