VScode创建vue项目

个人建议先建好一个文件夹来存放vue项目

本次以“vue_text”(空文件夹)为例。vue_text下有一个demo(空文件夹)来存放项目

• 配置Vscode

右击Vscode图标，选择属性，选择兼容性，勾选以管理员身份运行此程序，最后点击确定

Vscode中 点击 ctrl + `  调出终端

输入命令：get-ExecutionPolicy

输入命令：set-ExecutionPolicy RemoteSigned

输入命令：get-ExecutionPolicy

Restricted：表示禁止终端使用命令的

RemoteSigned：表示可以使用终端命令了

• 全局安装脚手架

在终端输入命令：cnpm i -g @vue/cli 或 npm i -g @vue/cli

（会下载一些东西，我这里只截取了部分）

• 创建项目

先创建一个放置项目的文件夹demo

在终端中使用cd指令跳转到这个文件夹

创建项目指令：vue create ds-demo（ds-demo是项目名，可以自己取）

(这里的demo就是开始的时候创建的，之恶进入到此目录下即可)

(vue create ds-demo执行后，就开始项目配置流程)

配置项目时：

上下箭头键：表示选择

回车键：表示确认

• 选择Manually select features，表示手动配置

• 选择需要安装的插件，一般选如下勾选项

（按空格键选择）

Babel：解析 es6 转 es5 的插件

TypeScript：TypeScript插件

Progressive Web App (PWA) Support：渐进式Web应用程序（PWA）支持

Router：vue路由插件

Vuex：Vuex插件

CSS Pre-processors：css预处理插件

Linter/Formatter：格式化程序

Unit Testing：单元测试

E2E Testing：端到端（end-to-end）

• 选择 vue 版本

• 选择路由模式 是否为 history模式，y表示是，N表示使用hash模式，这里选择的是N

• 选择使用那种css预处理器，这里选择的是 第一种Sass/SCSS (with dart-sass)

• 选择编码规则，建议初学者选择第一项，表示只有报错时才会验证

1. ESLint with error prevention only：只配置使用 ESLint 官网的推荐规则

2. ESLint + Airbnb config：官网推荐的规则 + Airbnb 第三方的配置

3. ESLint + Standard config：使用 ESLint 官网推荐的规则 + Standard第三方的配置

4. ESLint + Prettier：使用 ESLint 官网推荐的规则 + Prettier 第三方的配置

• 何时检测？这里选的是每次保存时验证Lint on save

Lint on save： 保存就检测

Lint and fix on commit：fix和commit时候检查

• 如何存放配置 ？这里使用 package.json

In dedicated config files ：独立文件放置

In package.json：放package.json里

• 是否保存本次配置（之后可以直接使用），这里选的是保存y

• 保持本次配置的信息并命名（随便取），下次就可以直接使用本次配置，无需从新手动配置

• 配置完成

到此回车时终端会下载东西，需要等待几分钟（4-7分钟左右）

• 进入项目

指令：cd ds-shop（进入项目文件夹）

指令：npm run serve（启动项目 ）

执行完之后 ，显示 Compiled successfully in ***，表示运行成功

出现下面情况即为创建成功

打开浏览器，输入Local地址（http://localhost:8080/）或者在控制台按住ctrl键点击Local地址

就能访问你刚创建的项目了

（当项目关闭需要重新启动时，执行(四)即可）

• 项目结构

node_modules：所有依赖项

public：静态内

favicon.ico：小图标

index.html

src：项目执行的主目录

assets：静态文件、图片、json、iconfon

components：组件

router：路由配置文件

views：放置页面内容

App.vue：项目的根组件，文件中可以写路由出口和路由链接，在 main.js里引入

main.js：项目的主入口文件

.gitignore：git的忽略文件

babel.config.js：设置 babel 的配置的

package.json：所有依赖包配置文件

README.md：项目文档