vue cli3环境搭建

目录

1.Vue cli环境搭建

1.1安装Node.js（js的运行环境）

1.2安装cnpm（淘宝的npm）

1.3安装vue-cli脚手架构建工具

1.4创建项目

2.VSCode搭建vue环境

3.问题及解决

---

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，代码调试，插件丰富等.

步骤：

1. 官网下载软件，安装
2. 下载完成后，点击左侧的扩展图标，安装需要的插件
3. 插件

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