安装Vue CLI
# 安装 Vue CLI
npm install -g @vue/cli
查看版本
vue --version
# 创建并启动 Vue CLI 项目
进入到要放在项目的文件夹
#vue create 项目名
vue create toutiao-publish-admin
2
Vue CLI v4.2.3
? Please pick a preset:
default (babel, eslint)
> Manually select features
2
3
4
default：默认勾选 babel、eslint，回车之后直接进入装包 manually：自定义勾选特性配置，选择完毕之后，才会进入装包 选择第 2 种：手动选择特性，支持更多自定义选项
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
( ) Vuex
(*) CSS Pre-processors
>(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
2
3
4
5
6
7
8
9
10
11
分别选择：
Babel：es6 转 es5
Router：路由
CSS Pre-processors：CSS 预处理器，后面会提示你选择 less、sass、stylus 等
Linter / Formatter：代码格式校验，ESLint 代码格式校验
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
是否使用 history 路由模式，这里输入 n 不使用
? 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
2
3
4
5
选择 CSS 预处理器，这里选择我们熟悉的 Less
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
> ESLint + Standard config
ESLint + Prettier
2
3
4
5
选择校验工具，这里选择 ESLint + Standard config (opens new window)
? Pick additional lint features:
(*) Lint on save
>(*) Lint and fix on commit
2
3
选择在什么时机下触发代码格式校验：
- Lint on save：每当保存文件的时候
- Lint and fix on commit：每当执行 git commit 提交的时候
这里建议两个都选上，更严谨。
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
2
3
Babel、ESLint 等工具会有一些额外的配置文件，这里的意思是问你将这些工具相关的配置文件写到哪里： ●In dedicated config files：分别保存到单独的配置文件 ●In package.json：保存到 package.json 文件中 这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。
? Save this as a preset for future projects? (y/N) N
这里里是问你是否需要将刚才选择的一系列配置保存起来，然后它可以帮你记住上面的一系列选择，以便下次直接重用。
这里根据自己需要输入 y 或者 n，我这里输入 n 不需要。
✨ Creating project in C:\Users\LPZ\Desktop\topline-m-fe89\topline-m-89.
� Initializing git repository...
⚙ Installing CLI plugins. This might take a while...
[ ........] - extract:object-keys: sill extract [email protected]
2
3
4
5
向导配置结束，开始装包。 安装包的时间可能较长，请耐心等待......
⚓ Running completion hooks...
� Generating README.md...
� Successfully created project topline-m-89.
� Get started with the following commands:
$ cd topline-m
$ npm run serve
2
3
4
5
6
7
8
9
安装结束，命令提示你项目创建成功，按照命令行的提示在终端中分别输入：
# 进入你的项目目录
cd toutiao-webapp
# 启动开发服务
npm run serve
2
3
4
5
DONE Compiled successfully in 7527ms
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.10.216:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
2
3
4
5
6
7
8
9
启动成功，命令行中输出项目的 http 访问地址。
打开浏览器，输入其中任何一个地址进行访问。
http://192.168.10.216:8080/
# 调整初始目录结构
这里主要就是下面的两个工作：
- 删除初始化的默认文件
- 新增调整我们需要的目录结构
1、将 App.vue 修改为：
<template>
<div id="app">
<h1>黑马头条内容发布系统</h1>
<!-- 路由出口 -->
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="less"></style>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2、将 router/index.js 修改为：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 路由配置表
const routes = []
const router = new VueRouter({
routes
})
export default router
2
3
4
5
6
7
8
9
10
11
12
13
3、删除默认生成的不相关文件：
src/views/About.vue
src/views/Home.vue
src/components/HelloWorld.vue
src/assets/logo.png
4、增加以下几个目录
src/api 目录
- 存储接口模块
src/utils 目录
- 存储一些工具模块
src/styles 目录
- index.less 文件，设置全局样式
- 在
main.js中加载全局样式import './styles/index.less'
- 在
调整之后的目录结构如下。
.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src
├── api
├── App.vue
├── assets
├── components
├── main.js
├── router
├── utils
├── styles
└── views
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# JavaScript 代码规范
# 流行的编码规范
Airbnb JavaScript Style
- 非常严谨，规则特别多
JavaScript Standard Style
- 相比 Airbnb JavaScript Style 要宽松一些。
我们项目中使用的是 JavaScript Standard Style (opens new window) 代码风格。下面是它的一些具体规则要求
# JavaScript Standard Style 规范说明
建议把：https://standardjs.com/rules-zhcn.html 看一遍，然后在写的时候遇到错误就查询解决。
使用两个空格 – 进行缩进
字符串使用单引号 – 需要转义的地方除外
不再有冗余的变量 – 这是导致 大量 bug 的源头！
无分号 – 这 (opens new window)没什么不好。 (opens new window)不骗你！ (opens new window)
行首不要以
(,[, or ``` 开头- 这是省略分号时唯一会造成问题的地方 – 工具里已加了自动检测！
关键字后加空格
if (condition) { ... }函数名后加空格
function name (arg) { ... }坚持使用全等
===摒弃==一但在需要检查null || undefined时可以使用obj == null。一定要处理 Node.js 中错误回调传递进来的
err参数。使用浏览器全局变量时加上
window前缀- document 和 navigator 除外
- 避免无意中使用到了这些命名看上去很普通的全局变量，
open,length,event还有name。
- 避免无意中使用到了这些命名看上去很普通的全局变量，
查看更多 – 为何不试试 standard 规范呢！
说了那么多，看看这个遵循了 Standard 规范的示例文件 (opens new window) 中的代码吧。或者，这里还有一大波使用了此规范的项目 (opens new window) 代码可供参考。