VSCode的html页面和Vue单页面应用搭建使用全过程

VSCode的.html页面运行和vue引入使用

下载插件Vetur、ESLint
Vetur: 使代码变得高亮，并带有快捷方式的代码输入。(当你第一次使用vscode编辑器时，所有代码的字体颜色都是白色的)
ESLint: 是一个代码规范和错误检查工具
https://blog.csdn.net/linton1/article/details/84232379

如何引入vue

1.外部引入vue
2.使用vue
el: vue适用范围
data: 数据
methods: 方法
computed: 计算属性
watch: 监听器
component: 组件

计算属性:
监听属性:

如何运行.html页面

1.在插件里面下载open on browser
2.在.html页面中点击右键，出现Open In Default Browser/Open In Other Browser

Vue单页面应用搭建

1.安装node.js，当node.js安装成功npm便也安装成功，最后通过node -v和npm -v在cmd窗口检查是否安装成功。
2.安装vue/cli，npm install -g @vue/cli，-g表示全局安装，并使用vue -V在cmd窗口检查是否安装成功。
3.创建项目(文件) vue create 文件名

安装node.js并检查是否安装成功

进入node.js官网下载，安装过程一路next

进入cmd窗口，检查是否安装成功

安装vue/cli并检查是否安装成功

https://www.cnblogs.com/cat520/p/12943480.html

vue-cli的安装
npm install @vue/cli -g
vue-cli的卸载
npm uninstall vue-cli -g
检查vue-cli是否安装成功和其版本(其实检查是否安装成功就是看看能不能检查出你安装插件的版本，毕竟查不出版本就是没安装出来嘛)
vue -V
如果安装的vue-cli版本在3.0之前，安装的代码如下:
npm install vue-cli -g(同样全局安装)

vue/cli4的安装与使用
1：若你已安装过vue-cli2的话，你得先卸载掉，命令如下
//首先查看是否已安装过vul-cli
vue -V
//如是有的话，就用下面命令卸载
npm uninstall vue-cli -g

2:安装vue-cli 4.0.5
//一键初始化项目
npm init -y
// 安装vue-cli
npm install @vue/cli -g
//也可使用cnpm 来安装 ，比较快些
cnpm install @vue/cli -g

创建项目

1.打开cmd窗口，定位到你想把项目放在的文件位置。

或者第二种方法，打开你想要创建项目的文件夹，选中输入框的路径，输入cmd指令，然后点击回车，出现的效果和上图一致。

2.创建一个项目
//1.命令 回车
vue create 项目名
//2.选择自定义配置 Manually select features
//3.选择你需要的配置
Babel (必选)
TypeScript（项目中使用ts开发的话，就勾选）
Progressive Web App (PWA) Support (接口缓存，优化项目)
Router
Vuex
CSS Pre-processors (css预处理器，需要)
Linter / Formatter (代码格式，一般默认选中)
Unit Testing (代码测试)
E2E Testing（需求界面测试）
//4.根据你选的配置进行Y/N选择
//5.选择完之后，就可以运行项目
npm run serve





ps: 另附一个创建webpack项目的方法https://www.cnblogs.com/dzcici/p/13539886.html