vue-cli

最新推荐文章于 2020-06-25 23:05:29 发布

夕麻

最新推荐文章于 2020-06-25 23:05:29 发布

阅读量108

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45735361/article/details/105244351

版权

9 篇文章 0 订阅

订阅专栏

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。

在这里插入图片描述

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>

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

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

关注