vue.js|vue-Cli（三）

iFakeCoder

于 2021-09-03 16:57:01 发布

阅读量440

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js 文章标签： vue.js node.js javascript

本文链接：https://blog.youkuaiyun.com/wglink/article/details/120085684

Vue.js 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了vue-cli的使用，从安装到创建项目，包括命令行和界面方式。还探讨了项目结构，组件定义与导入，局部样式的使用，以及如何在Vue组件中应用Sass语法。此外，文章还深入讲解了Node.js环境的配置，如nvm的安装，node与npm的管理，以及如何设置淘宝镜像加速包的安装。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-cli

vue-cli是和vue进行深度组合的工具，可以快速帮我们创建vue项目，并且把一些脚手架相关的代码给我们创建好。真正使用vue开发项目，都是用vue-cli来创建项目的。

安装

Vue CLI需要Node.js 8.9或更高版本 (推荐8.11.0+)。node环境安装后，直接通过npm install -g @vue/cli即可安装。安装完成后，输入vue --version，如果出现了版本号，说明已经下载完成。

用命令行创建项目

在指定路径下使用vue create [项目名称]创建项目。
会让你选择要安装哪些包（默认是Babel和ESLint），也可以手动选择。
如果在安装的时候比较慢，可以在安装的时候使用淘宝的链接：vue create -r https://registry.npm.taobao.org [项目名称]。
如果实在不想在创建项目的时候都指定淘宝链接，可以在当前用户目录下，找到.npmrc，然后设置registry=https://registry.npm.taobao.org。

用界面创建项目

打开cmd，进入到你项目存储的路径下。然后执行vue ui，就会自动打开一个浏览器界面。
按照指引进行选择，然后一顿下一步即可创建。

项目结构介绍

node_modules：本地安装的包的文件夹。
public：项目出口文件。
src：项目源文件：

- assets：资源文件，包括字体，图片等。
- components：组件文件。
- App.vue：入口组件。
- main.js：webpack在打包的时候的入口文件。

babel.config.js：es*转低级js语言的配置文件。
package.json：项目包管理文件。

组件定义和导入

定义：组件定义跟之前的方式是一模一样的。只不过现在模板代码专门放到.vue的template标签中，所以不再需要在定义组件的时候传入template参数。另外，因为需要让别的组件使用本组件，因此需要用export default将组件对象进行导出。
导入：因为现在组件是在不同的文件中。所以如果需要引用，那么必须进行导入。用ES6语法的import XXX from XXX。

局部样式

默认情况下在.vue文件中的样式一旦写了，那么会变成全局的。如果只是想要在当前的组件中起作用，那么可以在style中加上一个scoped属性即可。示例代码如下：

<style scoped>
.info{
   background-color: red;
}
</style>

使用sass语法

很多小伙伴在写样式代码的时候，不喜欢用原生css，比较喜欢用比如sass或者less，这里我们以sass为例，我们可以通过以下两个步骤来实现：

安装loader：webpack在解析scss文件的时候，会去加载sass-loader以及node-loader，因此我们首先需要通过npm来安装一下：

npm install node-sass@4.12.0 --save-dev
npm install sass-loader@7.0.3 --save-dev

指定sass语言：在指定style的时候，添加lang="scss"属性，这样就会将style中的代码识别为scss语法。

node环境配置：

nvm安装：

nvm（Node Version Manager）是一个用来管理node版本的工具。我们之所以需要使用node，是因为我们需要使用node中的npm(Node Package Manager)，使用npm的目的是为了能够方便的管理一些前端开发的包！nvm的安装非常简单，步骤如下：

到这个链接下载nvm的安装包：https://github.com/coreybutler/nvm-windows/releases。
然后点击一顿下一步，安装即可！
安装完成后，还需要配置环境变量。在我的电脑->属性->高级系统设置->环境变量->系统环境变量->Path下新建一个，把nvm所处的路径填入进去即可！
打开cmd，然后输入nvm，如果没有提示没有找不到这个命令。说明已经安装成功！
Mac或者Linux安装nvm请看这里：https://github.com/creationix/nvm。也要记得配置环境变量。

nvm常用命令：

nvm install [version]：安装指定版本的node.js。
nvm use [version]：使用某个版本的node。
nvm list：列出当前安装了哪些版本的node。
nvm uninstall [version]：卸载指定版本的node。
nvm node_mirror [url]：设置nvm的镜像。
nvm npm_mirror [url]：设置npm的镜像。

node安装：

安装完nvm后，我们就可以通过nvm来安装node了。这里我们安装10.16.0版本的的`node.js。

nvm install 10.16.0

如果你的网络够快，那以上命令在稍等片刻之后会安装成功。如果你的网速很慢，那以上命令可能会发生超时。因为node的服务器地址是https://nodejs.org/dist/，这个域名的服务器是在国外。因此会比较慢。因此我们可以设置一下nvm的源。

nvm node_mirror https://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/

npm：

npm(Node Package Manager)在安装node的时候就会自动的安装了。当时前提条件是你需要设置当前的node的版本：nvm use 10.16.0。然后就可以使用npm了.

初始化：

在新的项目中，需要先执行npm init初始化，创建一个package.json文件用来保存本项目中用到的包。

安装包：

安装包分为全局安装和本地安装。全局安装是安装在当前node环境中，在可以在cmd中当作命令使用。而本地安装是安装在当前项目中，只有当前这个项目能使用，并且可以通过require引用。安装的方式只有-g参数的区别：

npm install vue   # 本地安装
npm install vue --save   # 本地安装，并且保存到package.json的dependice中
npm install vue --save-dev # 本地安装，并且保存到package.json的dependice-dev中
npm install vue -g   #全局安装
npm install -g @vue/cli  #全局安装vue-cli

本地安装

将安装包放在./node_modules下（运行 npm 命令时所在的目录），如果没有node_modules目录，会在当前执行npm命令的目录下生成node_modules目录。
可以通过require()来引入本地安装的包。

全局安装

将安装包放在/usr/local下或者你node的安装目录。
可以直接在命令行里使用。

卸载包：

npm uninstall [package]

更新包：

npm update [package]

搜索包：

npm search [package]

使用淘宝镜像：

npm的服务器在国外。那么可以安装一下cnpm，并且指定镜像为淘宝的镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

那么以后就可以使用cnpm来安装包了！

手动安装npm：

有时候使用nvm安装完node后，npm没有跟着安装，这时候可以到https://github.com/npm/cli/releases下载6.10.1的版本。然后下载完成后，解压开来，放到v10.16.0/node_modules下，然后修改名字为npm，并且把npm/bin中的npm和npm.cmd两个文件放到v10.16.0根目录下。