19
19
- JWT 身份验证
20
20
- 权限分配/自定义动作
21
21
22
- ** 后面章节的内容 ** 主要有 :
22
+ 后面的章节将正式进入 Vue 前端的搭建。 ** 核心知识点 ** 有 :
23
23
24
24
- 用 Vue 搭建前端页面
25
25
- 实现 Vue 和 Django 的配合
31
31
- Vue-Cli 4.5.9
32
32
- npm 6.14.9
33
33
34
- ** 注意事项1:** 笔者写教程时正处于 ** Vue2** 和 ** Vue3** 的过渡时期(教程里用到的基本功能其实变化并不大,但是对新手来说一点点配置问题可能都要查半天文档,所以尽量保持版本一致),Vue3 从文档到生态都还不完善(现已推出了中文文档)。但是秉着学新不用旧的精神,教程会采用 Vue3 。读者在看教程时一定要注意相关框架的版本,以免出现接口变动、大版本不一致等原因造成的代码失效的情况。
34
+ ** 注意事项1:** 笔者写教程时正处于 ** Vue2** 和 ** Vue3** 的过渡时期,Vue 3 从文档到生态都还不完善(现已推出了中文文档)。但是秉着学新不用旧的精神,教程会采用 Vue 3 。读者在看教程时一定要注意相关框架的版本,以免出现接口变动、大版本不一致等原因造成的代码失效的情况。
35
35
36
- ** 注意事项2:** 本教程的笔者需要具有一定前端基础(最起码了解 HTML、Javascript、CSS语法)。如果你前端零基础,那么先浏览以下内容 :
36
+ ** 注意事项2:** 本教程的笔者需要具有一定前端基础(最起码了解 HTML、Javascript、CSS语法)。如果你前端零基础,那么建议先浏览以下内容 :
37
37
38
38
- [ 廖雪峰的Javascript教程] ( https://www.liaoxuefeng.com/wiki/1022910821149312 )
39
39
- [ FreeCodeCamp] ( https://www.freecodecamp.org/learn/ )
40
40
- [ ES6 入门教程] ( https://es6.ruanyifeng.com/ )
41
41
42
- 一切准备就绪 。
42
+ 再次建议读者将 [ 示例代码 ] ( https://github.com/stacklens/django-vue-tutorial ) 克隆到本地,作为学习过程的参照(也感谢你顺手给一个 Star) 。
43
43
44
- 再次建议读者将[ 示例代码] ( https://github.com/stacklens/django-vue-tutorial ) 克隆到本地,作为学习过程的参照;也感谢你顺手给一个 Star,作为笔者花费大量业余时间写免费开源教程的鼓励。
45
-
46
- 本章的核心任务是让前端服务顺利启动起来。
44
+ 话不多少,本章的核心任务是让前端服务顺利启动起来。
47
45
48
46
## 准备工作
49
47
87
85
> vue create frontend
88
86
```
89
87
90
- 回车后 ** 一定要** 选择安装 Vue 3:
88
+ ** 一定要** 选择安装 Vue 3:
91
89
92
90
> 前面说了,Vue 3 和 Vue 2 变化比较大,装错了后面章节的代码可能都跑不起来。
93
91
@@ -101,12 +99,12 @@ Vue CLI v4.5.9
101
99
Manually select features
102
100
```
103
101
104
- 然后静置一段时间 :
102
+ 然后等待安装完成 :
105
103
106
104
``` python
107
105
Vue CLI v4.5.9
108
- ✨ Creating project in D:\Developer\Py\drf_vue_blog\frontend.
109
- ⚙️ Installing CLI plugins. This might take a while ...
106
+ Creating project in D:\Developer\Py\drf_vue_blog\frontend.
107
+ Installing CLI plugins. This might take a while ...
110
108
111
109
...
112
110
@@ -115,28 +113,28 @@ added 1243 packages from 946 contributors in 22.141s
115
113
63 packages are looking for funding
116
114
run `npm fund` for details
117
115
118
- 🚀 Invoking generators...
119
- 📦 Installing additional dependencies...
116
+ Invoking generators...
117
+ Installing additional dependencies...
120
118
121
119
added 75 packages from 83 contributors in 9. 281s
122
120
123
121
69 packages are looking for funding
124
122
run `npm fund` for details
125
123
126
- ⚓ Running completion hooks...
124
+ Running completion hooks...
127
125
128
- 📄 Generating README .md...
126
+ Generating README .md...
129
127
130
- 🎉 Successfully created project frontend.
131
- 👉 Get started with the following commands:
128
+ Successfully created project frontend.
129
+ Get started with the following commands:
132
130
133
131
$ cd frontend
134
132
$ npm run serve
135
133
```
136
134
137
135
出现这段文字说明 Vue 安装完成了。
138
136
139
- 与 Django 需要运行服务器类似,作为前后端分离的项目,在开发时前端同样也需要运行前端的服务器 。
137
+ 与 Django 需要运行服务器类似,作为前后端分离的项目,** 在开发时 ** 前端同样也需要运行前端的服务器 。
140
138
141
139
根据文字提示,进入 `frontend` 目录,运行 Vue 的开发服务器:
142
140
0 commit comments