构建一个简单的vue项目&使用VsCode运行Vue项目

六月份在上一家公司提出离职，本意想着学习半年去考研，由于手续流程办理的繁琐复杂，离职路上格外煎熬，被真香打脸，无奈偏偏为五斗米折了腰，考研的事推到明年吧，离职证明刚下来，去了新的公司工作，接触新的项目，需要学习vue及springoot相关知识。现使用webpack搭建vue空白项目，并使用vscode终端运行vue项目。

创建一个vue项目

配置相关开发环境

安装node.js_官方网站下载：https://nodejs.org/en/
具体安装步骤：
选择符合操作系统的安装包，下载完成并傻瓜式安装(一直下一步)，注意修改安装路径，直到finish结束。
win+R输入cmd，分别输入命令:node -v和npm -v回车查看版本号，判断是否安装成功。
因为默认此后的安装路径默认在c盘占用内存，此时需要配置npm安装全局模块时的路径和缓存cache的路径：
在你的node.js安装目录下新建两个文件夹 node_global和node_cache，然后在cmd下执行：
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
注意：“D:\Program Files\nodejs\”此处为你的安装路径。
随后打开环境变量，在系统变量中添加NODE_PATH，路径为“D:\nodejs\node_global”自己的node_global路径；并在path后添加“;D:\nodejs\“自己的nodejs安装路径，保存。
更改注册表:在cmd中输入$ npm config set registry https://registry.npm.taobao.org。执行此命令后，每次执行npm install，都会默认从淘宝镜像搜索并下载包。
安装vue，打开cmd命令，执行npm install --global vue-cli 全局安装，在环境变量用户path中配置vue cmd
位置。安装完成后输入vue -V，出现Vue版本号，验证Vue 安装成功。

创建基于webpack模板的新项目

在自定位置新建文件夹。
cmd命令打开文件夹【d:~cd 文件夹名~...】
cmd命令上输入vue init webpack project01 【project01 为项目名】
待执行完毕，填写基础信息（内容如下）

image.png

其中should we run npm install.... (这句话是在问是否在工程创建后就去跑 npm 安装依赖 这里面有几个选项 本人选最后一个 稍后自己安装依赖)继续等待下载完毕。

image.png

待执行完毕cmd命令在项目文件目录中执行：cnpm install --by=npm 命令安装依赖，依赖安装完成目录中会出现node_modules文件夹（安装依赖的位置）

image.png

随后进入文件夹 执行运行命令 npm run dev 运行。

image.png

使用VsCode运行Vue项目

下载vscode并配置语言

下载并安装vscode软件，运行vscode程序，按Ctrl + Shift + P打开命令板，然后开始键入“display”以过滤并显示Configure Display Language命令
选择Configure Display Language，按Enter键，会打开locale.json文件，其默认值位当前使用的语言，为“en”。将“en”改为“zh-CN”，然后ctrl +S 保存locale.json并重新启动VS Code以使用新的显示语言。
点击扩展视图，搜索语言包 category:"Language Packs"。选择中文（简体），点击Install，然后重启

image.png

配置vscode环境并导入项目运行

点击Ctrl + Shit + X打开插件扩展窗口，同上，下载vetur（高亮显示）插件并安装，下载eslint（错误检测）插件并安装（若出现卡住时可重启，换个网号的地方安装）
随后直接文件->打开文件夹 导入项目，Ctrl+shift+Y打开控制台，在控制台选择终端，输入npm install添加包依赖 ，若添加时间过长可重新执行cnpm install --by=npm 命令安装依赖。
若安装过程报错，再执行'npm cache clean --force'清缓存再安装，反复几次后，安装成功。
最后执行运行命令 npm run dev 运行。

image.png

（本人添加依赖时出现各种不同错误，发现可能是webpack版本过新导致的问题，把webpack版本更替成低版本后程序运行成功）

高版本webpack更换为低版本

在全局下安装：npm install webpack -g
先执行在全局下删除 ：cmd命令 npm uninstall webpack -g
将项目目录下的node-modules一起删除，有些残留文件影响结果。
随后安装指定版本：npm install webpack@<版本号> -g ,例：npm install [email protected] -g
查看webpack 版本信息
npm info webpack
如果要使用webpack开发工具，要单独安装 webpack-dev-server
npm install webpack-dev-server --save-dev

注：
--save：将保存配置信息到pacjage.json的dependencies节点中。
--save-dev：将保存配置信息到pacjage.json的devDependencies节点中。
dependencies：运行时的依赖，发布后，即生产环境下还需要用的模块
devDependencies：开发时的依赖。里面的模块是开发时用的，发布时用不到它。

2019.7.19