提交 a0bfd9a2 编写于 作者: L luxin

add keywords_must

上级 e72193c5
......@@ -10,7 +10,7 @@
"exercises.json"
],
"keywords_must": [
[["axios", "vue", "用法"], ["axios", "vue", "使用"]]
["axios", "vue", "用法"], ["axios", "vue", "使用"]
],
"keywords_forbid": []
}
\ No newline at end of file
{
"node_id": "vue-f7c73ed8889a4d56ab803228bb532ca9",
"keywords": [],
"node_id": "vue-35b90aa83701425696c832b4da590cc6",
"keywords": [
"安装webpack"
],
"children": [],
"export": [
"exercises.json"
......
......@@ -3,5 +3,5 @@
"author": "zhaoss",
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "b2ef981f462d41918ee5f2b6d8d29fbe"
"exercise_id": "73b6d3521d6e42e28301ea7885df0b7d"
}
\ No newline at end of file
# 通过脚手架创建项目
# 安装webpack
 <div style="color: pink;font-size:22px;font-weight:700">小常识:</div>
<div style="color: pink;font-size:22px;font-weight:700">小常识:</div>
<br>
**创建Vue项目**
> 在要创建项目的文件夹下面打开Powershell窗口
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200728104924858.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
> 输入命令 vue create 项目名称
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230344767.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
选择第二项
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230458492.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
回车后
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230604113.png)
<br/>
选择是否使用历史路由 no 回车
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230655384.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
选择 Less 回车
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230733469.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
选择第三个 回车
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230815578.png)
<br/>
选择第一个 回车
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230835328.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
选择第一个 回车
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230905737.png)
<br/>
是否保存模板 选择no
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721231628826.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
完成啦
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721233714426.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
<br/>
1.打开项目目录终端,输入命令:
```javascript
npm install webpack webpack-cli -D
```
2.然后在项目根目录中,创建一个 webpack.config.js 的配置文件用来配置webpack
<br>
在 webpack.config.js 文件中编写代码进行webpack配置,如下:
```javascript
module.exports = {
mode:"development"//可以设置为development(开发模式),production(发布模式)
}
```
补充:mode设置的是项目的编译模式。
<br>
如果设置为development则表示项目处于开发阶段,不会进行压缩和混淆,打包速度会快一些,如果设置为production则表示项目处于上线发布阶段,会进行压缩和混淆,打包速度会慢一些
<br>
3. 修改项目中的package.json文件添加运行脚本dev,如下:
```javascript
"scripts":{
"dev":"webpack"
}
```
 <div style="color: #8E7CC3;font-size:22px;font-weight:700">小测试:</div>
注意:scripts节点下的脚本,可以通过 npm run 运行,如:
```javascript
运行终端命令npm run dev
```
将会启动webpack进行项目打包
<br>
4. 运行dev命令进行项目打包,并在页面中引入项目打包生成的js文件
打开项目目录终端,输入命令:
关于vue-cli的安装以下说法不正确的是?<br/><br/>
```javascript
npm run dev
```
等待webpack打包完毕之后,找到默认的dist路径中生成的main.js文件,将其引入到html页面中。
<br>
<div style="color: #8E7CC3;font-size:22px;font-weight:700">小测试:</div>
在webpack 4.x中,默认会将src/index.js 作为默认的打包入口js文件,默认会将dist/main.js 作为默认的打包输出js文件,如果不想使用默认的入口/出口js文件我们如何设置?<br/><br/>
## 答案
通过设置 webpack.config.js
```javascript
const path = require("path");
module.exports = {
mode:"development",
//设置入口文件路径
entry: path.join(__dirname,"./src/xx.js"),
//设置出口文件
output:{
//设置路径
path:path.join(__dirname,"./dist"),
//设置文件名
filename:"res.js"
}
}
```
手动选择特性,无法保存已选项
## 选项
### A
手动设置则提供了更多的选项,它们是面向生产的项目更加需要的
通过设置 vue.config.js
```javascript
const path = require("path");
module.exports = {
mode:"development",
//设置入口文件路径
entry: path.join(__dirname,"./src/xx.js"),
//设置出口文件
output:{
//设置路径
path:path.join(__dirname,"./dist"),
//设置文件名
filename:"res.js"
}
}
```
### B
可以选默认的preset也可以选“手动选择特性”来选取需要的特性
通过 main.js 中添加下列代码即可
```javascript
const path = require("path");
module.exports = {
mode:"development",
//设置入口文件路径
entry: path.join(__dirname,"./src/xx.js"),
//设置出口文件
output:{
//设置路径
path:path.join(__dirname,"./dist"),
//设置文件名
filename:"res.js"
}
}
```
### C
使用vue create命令来创建项目
不可以设置
\ No newline at end of file
......@@ -8,7 +8,7 @@
"exercises.json"
],
"keywords_must": [
"webpack"
["webpack", "基本", "使用"]
],
"keywords_forbid": []
}
\ No newline at end of file
{
"node_id": "vue-35b90aa83701425696c832b4da590cc6",
"keywords": [
"安装webpack"
],
"children": [],
"export": [
"exercises.json"
],
"keywords_must": [
"webpack"
],
"keywords_forbid": []
}
\ No newline at end of file
{
"type": "code_options",
"author": "zhaoss",
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "73b6d3521d6e42e28301ea7885df0b7d"
}
\ No newline at end of file
# 安装webpack
<div style="color: pink;font-size:22px;font-weight:700">小常识:</div>
<br>
1.打开项目目录终端,输入命令:
```javascript
npm install webpack webpack-cli -D
```
2.然后在项目根目录中,创建一个 webpack.config.js 的配置文件用来配置webpack
<br>
在 webpack.config.js 文件中编写代码进行webpack配置,如下:
```javascript
module.exports = {
mode:"development"//可以设置为development(开发模式),production(发布模式)
}
```
补充:mode设置的是项目的编译模式。
<br>
如果设置为development则表示项目处于开发阶段,不会进行压缩和混淆,打包速度会快一些,如果设置为production则表示项目处于上线发布阶段,会进行压缩和混淆,打包速度会慢一些
<br>
3. 修改项目中的package.json文件添加运行脚本dev,如下:
```javascript
"scripts":{
"dev":"webpack"
}
```
注意:scripts节点下的脚本,可以通过 npm run 运行,如:
```javascript
运行终端命令npm run dev
```
将会启动webpack进行项目打包
<br>
4. 运行dev命令进行项目打包,并在页面中引入项目打包生成的js文件
打开项目目录终端,输入命令:
```javascript
npm run dev
```
等待webpack打包完毕之后,找到默认的dist路径中生成的main.js文件,将其引入到html页面中。
<br>
<div style="color: #8E7CC3;font-size:22px;font-weight:700">小测试:</div>
在webpack 4.x中,默认会将src/index.js 作为默认的打包入口js文件,默认会将dist/main.js 作为默认的打包输出js文件,如果不想使用默认的入口/出口js文件我们如何设置?<br/><br/>
## 答案
通过设置 webpack.config.js
```javascript
const path = require("path");
module.exports = {
mode:"development",
//设置入口文件路径
entry: path.join(__dirname,"./src/xx.js"),
//设置出口文件
output:{
//设置路径
path:path.join(__dirname,"./dist"),
//设置文件名
filename:"res.js"
}
}
```
## 选项
### A
通过设置 vue.config.js
```javascript
const path = require("path");
module.exports = {
mode:"development",
//设置入口文件路径
entry: path.join(__dirname,"./src/xx.js"),
//设置出口文件
output:{
//设置路径
path:path.join(__dirname,"./dist"),
//设置文件名
filename:"res.js"
}
}
```
### B
通过 main.js 中添加下列代码即可
```javascript
const path = require("path");
module.exports = {
mode:"development",
//设置入口文件路径
entry: path.join(__dirname,"./src/xx.js"),
//设置出口文件
output:{
//设置路径
path:path.join(__dirname,"./dist"),
//设置文件名
filename:"res.js"
}
}
```
### C
不可以设置
\ No newline at end of file
......@@ -9,7 +9,7 @@
"exercises.json"
],
"keywords_must": [
"webpack"
["webpack", "配置"]
],
"keywords_forbid": []
}
\ No newline at end of file
......@@ -9,7 +9,7 @@
"exercises.json"
],
"keywords_must": [
"mock"
["mock", "介绍"]
],
"keywords_forbid": []
}
\ No newline at end of file
......@@ -8,7 +8,7 @@
"exercises.json"
],
"keywords_must": [
"Mock.js"
["Mock", "语法"]
],
"keywords_forbid": []
}
\ No newline at end of file
......@@ -9,7 +9,7 @@
"exercises.json"
],
"keywords_must": [
"Mock.js"
["Mock", "占位符"]
],
"keywords_forbid": []
}
\ No newline at end of file
......@@ -10,7 +10,7 @@
"exercises.json"
],
"keywords_must": [
"Mock"
["Mock", "安装"]
],
"keywords_forbid": []
}
\ No newline at end of file
......@@ -8,8 +8,7 @@
"exercises.json"
],
"keywords_must": [
"Vue",
"自定义指令"
["vue", "勾子函数"], ["vue", "钩子函数"]
],
"keywords_forbid": []
}
\ No newline at end of file
{
"type": "code_options",
"author": null,
"author": "zhaoss",
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "a34affde5e1849999bb3116ab4777bdb"
......
......@@ -8,8 +8,7 @@
"exercises.json"
],
"keywords_must": [
"自定义指令",
"Vue"
["vue", "动态指令", "参数"]
],
"keywords_forbid": []
}
\ No newline at end of file
{
"type": "code_options",
"author": null,
"author": "zhaoss",
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "acc37c5805244cb9bca3526be6b78a3a"
......
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册