1、项目的创建和GitHub托管


使用脚手架创建项目。🏳️‍🌈 传送门 🏳️‍🌈


将项目托管到GitHub上。🏳️‍🌈 传送门 🏳️‍🌈


2、划分项目的目录结构


3、基本css文件的引入

我们一般需要这两个基本文件

base.css 放一些我们要公共使用的基本css样式。

normalize.css 不同的浏览器，部分样式可能有一些差异，所以我们要统一他们，就可以使用 normalize.css 。下载地址 。

引入css文件：


这样我们在做项目的时候，专心在他们对应的组件内写样式就可以了。


3、给项目路径起别名

VueCLI 2 起别名 。 🏳️‍🌈 传送门 🏳️‍🌈

VueCLI 3 起别名 。

在项目中src根目录创建 vue.config.js文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'views': '@/views',
        'components': '@/components',
        'network': '@/network',
        'common': '@/common',
        'assets': '@/assets',
      }
    }
  }
}

@ 是vue内部给我们设置好的别名，"@": "src" ，所以这里我们直接使用@ 。


4、添加代码规范

.editorconfig 文件里面说明了一些 我们当前项目中的代码规范。

1
2
3
4
5
6
7
8
9
10
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true