Vue项目创建教程

柔情只为你懂 2023-10-03 11:25 6阅读 0赞

### 文章目录 ###

*   *  1、工程初始化步骤
     *   *  第一步：打开命令行窗口，使用\`vue create jingdong\`创建 Vue 项目
         *  第二步：选择\`Manually select features\`
         *  第三步：选择需要的模块，使用 空格键 勾选
         *  第四步 ：选择 \`Vue 3.X\` 版本
         *  第五步：输入 \`n\`
         *  第六步：选择 \`Sass/SCSS(with dart-sass)\`
         *  第七步：选择 \` ESLint + Standard config\`
         *  第八步：选择 \`Lint on save\`
         *  第九步：选择 \`In dedicated config files\`
         *  第十步：输入 \`n\`，按回车键
         *  第十一步：项目创建完毕
         *  第十一步：使用提示的命令，运行项目
         *  第十二步：得到项目访问地址
         *  第十三步：访问项目

## 1、工程初始化步骤 ##

> 每一步都使用 回车键 进入下一步

### 第一步：打开命令行窗口，使用`vue create jingdong`创建 Vue 项目 ###

![image-20210619110641691][]

### 第二步：选择`Manually select features` ###

![image-20210619110829909][]

### 第三步：选择需要的模块，使用 空格键 勾选 ###

![image-20210619111037963][]

### 第四步 ：选择 `Vue 3.X` 版本 ###

![image-20210619111215532][]

### 第五步：输入 `n` ###

![image-20210619111310937][]

### 第六步：选择 `Sass/SCSS(with dart-sass)` ###

![image-20210619111414017][]

### 第七步：选择 `ESLint + Standard config` ###

![image-20210619111459534][]

### 第八步：选择 `Lint on save` ###

![image-20210619111541659][]

### 第九步：选择 `In dedicated config files` ###

![image-20210619111745901][]

### 第十步：输入 `n`，按回车键 ###

![image-20210619111907024][]

### 第十一步：项目创建完毕 ###

![image-20210619112016123][]

### 第十一步：使用提示的命令，运行项目 ###

![image-20210619112051397][]

### 第十二步：得到项目访问地址 ###

![image-20210619112132513][]

### 第十三步：访问项目 ###

![image-20210619112235207][]

[image-20210619110641691]: https://img-blog.csdnimg.cn/img_convert/c6612431fbf535e59bb6223f87e69d58.png
[image-20210619110829909]: https://img-blog.csdnimg.cn/img_convert/02ef3105e96b3be8445c2d896fa93b43.png
[image-20210619111037963]: https://img-blog.csdnimg.cn/img_convert/b013fc4ba551ec6521866456094dd8d9.png
[image-20210619111215532]: https://img-blog.csdnimg.cn/img_convert/1ddec661ddc0ee535e68677b8ef4e9e8.png
[image-20210619111310937]: https://img-blog.csdnimg.cn/img_convert/18ba6840e5f7b292437be2baadf9c47f.png
[image-20210619111414017]: https://img-blog.csdnimg.cn/img_convert/6f2146953246f05488d3da8556b44450.png
[image-20210619111459534]: https://img-blog.csdnimg.cn/img_convert/d78e1248145747aca96c255928f15847.png
[image-20210619111541659]: https://img-blog.csdnimg.cn/img_convert/7a9d208baef6e63a3a42c510cc52bda8.png
[image-20210619111745901]: https://img-blog.csdnimg.cn/img_convert/ad41767709c776e55d7c129beada77fe.png
[image-20210619111907024]: https://img-blog.csdnimg.cn/img_convert/e0d9bfdcff9e1d7b01ed1b765b6727c8.png
[image-20210619112016123]: https://img-blog.csdnimg.cn/img_convert/4a0bdab08a21e0b7407d4ba0f2c9af4b.png
[image-20210619112051397]: https://img-blog.csdnimg.cn/img_convert/505ae8b35f4f38b84762df61d36cf05a.png
[image-20210619112132513]: https://img-blog.csdnimg.cn/img_convert/4a1e1dda811254ecb002c24b62fb9fd7.png
[image-20210619112235207]: https://img-blog.csdnimg.cn/img_convert/44c7c981e9d5ac354a21c12c415b6a55.png