vue3环境搭建以及创建简单项目。

1.环境准备，以下都是我的版本。自己在官网上面下载需要的版本。

尝试了Python3.7.3在创建vue3项目时出现问题。

node.js10.16.0,

python2.7.16,

yarn1.16.0，

VSCode1.35.0

2.VSCode中安装插件。

(英文好的跳过第一步)

（1）Chinese Simplified Language,完成之后Ctrl+Shift+p，出现搜索框，录入Configure Display Language,选择zh-cn,然后重启VSCode.

(2)Beautify、ESLint、TSLint、Vetur、Path Autocomplete、

GitLens、Todo Tree、Bracket Pair Colorrizer 2、Material Icon Theme(根据需要安装)

3.配置插件

点击左下角,选择设置，上方直接搜索files,Files:Auto Save 选择onFocusChange，

清空刚才录入的files,在扩展中找到ESLint,勾选Auto Fix on save.在这一行的下面找到setting.json,编辑该文件

"eslint.validate": [ "javascript",{ "language": "vue", "autoFix": true },"html", "vue" ],
"path-autocomplete.pathMappings": { "@":"${folder}/src" }

将以上内容写入json文件。配置完成

 

4.命令行窗口执行 yarn global add @vue/cli,需要等待一段时间，安装完成之后执行 vue --version,看到的版本在3.0以上即可。

（查看一下vue-cli是干啥的）

5.搭建项目。

选择你想要放置vue3项目的一个目录，进入该目录下的cmd黑窗口，执行vue create porjectName(项目名称)

如果之前没有创建过vue3的项目，没有保存过之前创建项目时的一个选项。

会看到两个选项，接下来是我自己的配置（根据自己的需要来选择）

（1）Manually select features，

（2）勾选babel 、router 、vuex 、css pre-processors、 linter/Formatter

（3）use history mode for router ? no

（4）css pre-processors 选择了sass/scss with node-sass

（5）eslint   选择了standard config

（6）lint features 选择了lint on save

（7）placing config     In dedicated config files

  (8)   save this as a preset for future projects?     yes（保存这些设置，接下来创建项目时直接在第一步选择）

（9）save preset as:myPreset

等待创建完成，会出现两行特别醒目的文字：

cd projectName(你的项目名字)

yarn serve(启动运行项目)

6.启动项目。执行yarn serve

启动成功之后会看到

 -Local ：http://localhost:port/

 -Network : http://ip:port/

注意：端口号默认都是8080，如果8080端口已经被占用，会自动分配8081.

7.校验自己的成果。

在浏览器中录入上面任意一个location，都可以看到一个Vue的helloworld页面。