Vue学习 (一)安装与配置,创建hello world项目

IDE选用vscode

***************************

***************************

安装nodejs : https://nodejs.org/en/ 官网下载LTS版本并安装,当前版本是12.14.0

安装完后测试如下:

表示成功安装nodejs

***************************

***************************

先配置npm的国内源:

npm config set registry https://registry.npm.taobao.org

验证一下是否配置成功:

npm config get registry

安装vue及其常用脚手架:

npm install webpack -g

npm install -g @vue/cli

命令行输入vue测试是否安装成功:

***************************

***************************

找一个合适的文件夹,准备建立你的vue项目。我们的第一个项目准备起名叫hello_zt。在该文件夹下，敲入以下命令:

vue create hello_zt




(提一句,vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档网页链接。可能有的小伙伴会看到有vue init webpack hellO_zt这种写法。vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置))

会出现以下提示:

我们选择default，直接回车。等待一会，就OK啦:

按提示启动服务试试：

可以打开，美滋滋。

***************************

***************************

用vscode打开刚才的工程看一下:

点开App.vue,右下角会推荐你安装Vetur插件。

它包含了语法高亮，错误提示等常用功能。

这几乎已经确定是开发vue项目的标配了，vscode也会强烈建议你安装它:

************************************

************************************

安装一些其他插件:

*****************************

yarn:

什么是yarn:

yarn是facebook发布的一种包管理工具。

会缓存它下载的每个包， 无需重复下载；能并行化操作以最大资源利用率。
使用格式详尽而又简洁的 lockfile文件 和确定性算法来安装依赖，能够保证在一个系统上的运行的安装过程也会以同样的方式运行在其他系统上。
安装包被执行前校验其完整性。

安装命令:

npm install -g yarn

我们先拿它安装prettier,来做代码格式对齐。

我们先随便加几个空格试试:

调出vscode的终端(快捷键ctrl+shift+y):

输入如下命令:

yarn lint

观察下是否会去掉空格................发现并没有去掉 T_T

这是因为缺省的vue-cli没有为我们安装@vue/prettier插件，我们在终端手工安装一下：

yarn add -D @vue/eslint-config-prettier

然后在package.json中加上相应配置:

再次运行yarn lint命令试试:

尴尬报错。。。。。。继续安装缺失的插件:

yarn add eslint-plugin-vue   (为当前项目安装eslint-plugin-vue )

(也可以用yarn global add eslint-plugin-vue去全局安装,可用yarn global bin命令查看yarn bin文件夹路径,并将该路径设置为系统变量)

继续在vscode的终端下输入yarn lint , 查看效果:

可以看到。。空格没啦！！美滋滋！不过。。单引号也都变成双引号了。。。嘛，设置一下lint格式~

根目录下新建一个.prettierrc.js文件,并在其中建入以下内容:

module.exports = {
  semi: false,          //每行代码结尾的分号
  singleQuote: true     //单引号
}

再次运行yarn lint , 可以看到，都是单引号！没空格！没分号！如果以后接手别人乱七八糟的项目,一个yarn lint就可以变整齐啦~

**************************************************

**************************************************

eslint:

什么是eslint:

它是一个插件化并且可配置的JavaScript语法规则和代码风格的检查工具,说白了就是让你代码写的好看点,格式不会太乱。

在vscode的应用商店里搜索eslint,并安装:

我们随便加点空格试试：

 提示很明显。这样基本的环境就搭成了，可以撸起袖子敲代码啦