vue脚手架搭建

前言

这段时间呆到公司，事情比较少！vue很早之前用过一段时间，由于现在涉及淘宝小程序比较多，Vue的学习也比较少！所以我会把vue相关的知识总结一下，由于之前一直用的是Vue2.0x所以可能涉及vue2.0x版本的东西比较多！

基础篇之vue脚手架搭建

一，全局安装vue脚手架

全局安装下载vue脚手架,需要主要提前安装node，这里的cnpm是淘宝镜像速度比npm比较快

cnpm install -g @vue/cli

终端下载完成后就可以创建我们的脚手架了

二，脚手架创建与配置

vue create project

这里的project是项目的名字你可以随便起名

这里就进行选择项了如果大家是第一次搭建的话是没有我这里的第一个选项的，这里的一个选项是之前配置过脚手架保存下来的，选择的话，就是上次的配置！

第二个选项 是默认的vue2.0配置
第三个选项 是默认的vue3.0配置

由于一般在项目中默认的配置是达不到我们的需求的所以选择第四个选项手动进行配置


Babel 主要用来翻译es6代码 和webpack 这些一样相当于它的幕后的工具

typescript ts如果有需要集成的可以选择上，这里我们不需要就不选择了

Router 路由

vueX 状态管理

Css 样式处理,支持scss（嵌套写法等一些scss格式的css）

Linter 这货是个代码格式工具非常恶心 让代码有一个同一的风格当然也可以关闭在vue.config.js中只需要一句话 lintOnSave: false // 关了eslint 检查

对了这里补充一下 按空格选择

选择完毕后按回车继续

这里意思是问你选择2.0版本还是3.0版本 我们选择2.0版本

这里问你是否启用history路由模式？我们输入Y即可或者直接Yes就好！这个后面是可以更改的

至于什么是history路由模式？路由模式有哪些？也许我会在后续中为大家分享~~喜欢的朋友请关注！

这里选择第一个就好 sass/scss(with dart-sass)

这里是选择代码检查工具 我们选择标准的检查就好

这个两个都选择 是代码提交的时候可以自动修复

所有的配置是否放在一个默认的文件夹下还是放在package.json中 选择第一个就好

是否保存本次配置输入y 可以进行保存 输入N 不保存！保存之后下次搭建就可以一键搭建这次配置好的东西了 建议保存

给本次配置起个名字 然后回车

好到这里本次教授搭建就顺利完成了~~~之后就是漫长等待下载！！！

到这里就彻底下载搭建完成了

三，vue项目的启动

将之前搭建的项目拉到vscode编辑器中 然后在终端打开输入

npm run serve

启动项目

其实这里是可以更改启动命令的 在package.json中我们可以任意修改或者添加你喜欢的命令

我这里加了个dev

这样运行

npm run serve
或者
npm run dev

就可以启动项目了

http://localhost:8080/

默认访问地址或者ip:8080

好了今天就分享到这里一些语法问题和有关脚手架的后期完善我会在之后为大家分享~~~~