目录
1.Vue cli环境搭建
注意以管理员身份打开终端
1.1安装Node.js(js的运行环境)
(1)在Node.js官网https://nodejs.org/en/download/下载安装包。
(2)下载后进行安装。
(3)打开命令行,输入node -v可以查看到版本号。输入npm –v可看到npm版本号。
新版的Node.js已自带npm(类似.net中的nuget包管理器),安装Node.js时会一起安装。(将来要更新npm可用这个命令npm intall npm@latest -g)
安装时,确认”Add to Path”选项被选上了,这样安装过程中就会自动配置好环境变量中的node.js的路径。
(4) 配置npm的全局模块的存放路径以及缓存的路径
在node.js的安装目录(C:\Program Files\nodejs)下新建两个文件夹node_cache和node_global方便集中管理。(因为默认会将模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间,所以下面两行的命令是修改模块保存的路径
然后在命令行输入
npm config set prefix "c:\Program Files\nodejs\node_global"
npm config set cache "c:\Program Files\nodejs\node_cache"
将来用npm install XXX -g安装以后模块就在这两个文件夹里。
然后在C:\Users\[你的用户名]下用记事本打开.npmrc文件确定如下图所示就说明设置成功了。
(5)配置npm的环境变量(因为上面修改了路径)
在系统变path中新增一个变量C:\Program Files\nodejs\node_global\node_modules
然后在用户变量中修改变量为C:\Program Files\nodejs\node_global
最后就可以删掉C:\Users\xlz\AppData\Roaming下的npm目录了。(这里得显示隐藏的项目才能看到AppData目录)
(注意:修改了环境变量后要重新打开命令行界面)
(6)测试npm
安装个module测试下,例如最常用的express模块。
输入命令
npm install express –g
完成后在C:\Program Files\nodejs\node_global\node_modules目录下就可看到express文件夹和它的文件了。
1.2安装cnpm(淘宝的npm)
因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常。
1.下载安装cnpm并且使用淘宝的服务器做为的包源 。
输入命令:
npm install –g cnpm --registry=https://registry.npm.taobao.org
注意registry前面是两个杠啊。
完成后输入cnpm –v可查看到相关信息。
完成后在C:\Program Files\nodejs\node_global\node_modules目录下可看到cnpm文件夹和它的文件了。
还有在C:\Program Files\nodejs\node_global可看到cnpm和cnpm.cmd两个文件。
1.3安装vue-cli脚手架构建工具
在命令行中运行命令
npm install -g vue-cli
然后等待安装完成。
通过以上三步,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。
1.4创建项目
(1)打开工作目录 cd
(2)输入
vue create firstvue
创建新项目
(firstvue是项目名称)
(3)cd打开项目目录,运行项目
命令是:
出现下图就说明成功啦
2.VSCode搭建vue环境
Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。免费、开源、多平台,以及集成git,代码调试,插件丰富等.
步骤:
- 官网下载软件,安装
- 下载完成后,点击左侧的扩展图标,安装需要的插件
- 插件
Vetur
用vue开发的必装,官方推荐,别纠结用哪个,就它了。
作用:高亮.vue文件,附带有格式化功能,配合Eslint插件对代码进行格式化检查
Eslint
如果你想你(团队)的代码风格所有地方看起来都像是同一个人写的,就靠它咯
作用:检查你的js、html、css代码,确保它们符合规范,并且代码风格保持一致性,强制性的规则,你少写一个空格或者多敲一个回车都会被严格的指出来,强迫症的福音,第一次用它的同学可能会抓狂,熟悉后你会感谢它
使用:想让插件生效,你的项目还得做一番复杂的配置,好在vue-cli生成的项目帮我们把配置都生成好了,你也不必修改什么规则,直接用就行,在使用vue-cli生成webpack项目时会询问你是否启用eslint并且使用哪套规范,选择Standard规范就行
Alt+Shift+F一键格式化
4.配置
(1)代码错误实时提示
少写了一个空格,或者多写了一个分号,都能马上以醒目的波浪线提示出来,鼠标悬浮上去还有错误提示,双击波浪线的代码还会出现一个小灯泡,点击灯泡可以自动帮你修正代码格式:
我们可以找到编辑器左上角,依次打开 文件、 首选项、 设置,将i面配置加入到右边的用户设置中:
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
2.ctrl+s保存时自动修正格式错误的js代码
在配置里加入下面的json:
"eslint.autoFixOnSave": true,
3.格式化写的代码
在vue文件里,按下鼠标右键,在菜单里你会发现有个格式化文件按钮,我们点击它,你会发现,本来图A好好的代码格式化后变成了图B,由于不符合standard的规范,就报错了:
图A:
图B:
格式化后多帮我们加了分号,还把单引号变成了双引号。
这是由于vetur插件默认格式化vue文件里面的js代码使用的prettier,和我们的standard规范有冲突.
既然知道了原因,我们可以覆盖它的默认配置:
"vetur.format.defaultFormatter.js": "vscode-typescript",
再试一次格式化,发现问题解决了,不过还是报错:
鼠标悬浮上去提示告诉我们,定义函数时,函数名要与后面的括号有一个空格,所以我们继续加配置解决问题:
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
这次格式化vue文件终于没有报错啦
别急哈,问题还没完:
请你仔细的观察下整个vue文件格式化后的样子,有没有发现html模板代码没有被格式化。。。
因为vetur插件的默认格式化配置里,是没有为html模板格式的,需要我们手动指定配置:
"vetur.format.defaultFormatter.html": "prettier",
4.保存时自动格式化
每次写完代码自己右键菜单格式化似乎有点麻烦,所以我们可以让它更智能用电,ctrl+s一保存就立马自动格式化:
"editor.formatOnSave": true,
小结
好啦,能满足你基本写代码需求的插件和配置我讲完了,不多,配合vue-cli项目真的很省事,2个插件,几行配置就搞定了,更重要的是,你能知道每个插件、每行配置都干了什么事情,解决了什么问题,而不是装了一堆不知道作用的插件,配置了一堆自己也看不懂的配置。
这里汇总下上面的配置:
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
"eslint.autoFixOnSave": true,
"vetur.format.defaultFormatter.html": "prettier",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"editor.formatOnSave": true,
"editor.tabSize": 2,
3.问题及解决
1. 全局安装vue-cli之后,命令行执行vue -V,提示:“vue”不是内部或外部命令,也不是可执行的程序或批处理文件
网上的解决是 全局搜索vue.cmd 将vue.cmd所在的路径添加到环境变量Path后面。再执行vue -V即可。
但是我没找到vue.cmd。。。
又搜索了找不到vue.cmd文件的解决办法:
(1)第一步:配置path(已配置的可跳过)
npm config get prefix
复制得到的路径信息c:\Program Files\nodejs\node_global,去到桌面>右键计算机>属性>高级系统设置>环境变量添加到path中。
(2)安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
(之前我没安装cnmp,因为我看网上说由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所以需要npm的国内镜像—cnpm。不知道是不是这个原因导致vue.cmd没有安装上)
(3)(最关键!)
npm i npm -g
npm i @vue/cli -g //如果还报错也没关系,继续执行下面的命令
cnpm i @vue/cli -g
出现All packages installed (.......)就是成功啦!
可以用vue -V试试,能正常出现版本信息就是完美成功!
2. 创建项目使用vue init webpack projectname出现如下提示
出现这个提示的原因:博主的vue是2.多的,而vue3.多的创建项目的命令是:
vue create projectname
3.项目名不能包含大写字母
4.vue3.多的运行项目的命令行是:
npm run serve
5. 运行项目出现如下错误:
原因:需要先进入项目目录,再执行npm run serve命令
6.注意以管理员身份打开终端
vscode