Python全栈（六）项目前导之12.Vue-Cli的使用
Vue-Cli的使用一、nvm和npm的安装1.nvm的安装NVM相关概念NVM的安装和配置nvm中常用命令node安装2.npm的安装和使用初始化：安装包：包管理镜像使用cnpm手动安装npm二、vue-cli创建项目三、组件的定义和导入四、局部样式和Sass语法1.局部样式2.sass语法
一、nvm和npm的安装
1.nvm的安装
NVM相关概念
// import HelloWorld from './components/HelloWorld.vue'
import MyPage from './components/MyPage.vue'
export default {
// name: 'App',
// components: {
// HelloWorld
// }
name:'App',
components:{
'my-page':MyPage
}
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
nvm（Node Version Manager） 是一个用来管理node版本的工具。
我们之所以需要使用node，是因为我们需要使用node中的npm(Node Package Manager)，使用npm的目的是为了能够方便的管理一些前端开发的包。
可以点击https://download.csdn.net/download/CUFEECR/12308708或https://github.com/coreybutler/nvm-windows/releases下载nvm的安装包。
下载安装之后还需要配置环境变量，配置过程如下：
-->
（3）此时运行后查看网页：
默认情况下在.vue文件中的样式一旦写了，那么会变成全局的。
如果只是想要在当前的组件中起作用，那么可以在style中加上一个scoped属性即可。
示例代码如下：
.info{
background-color: red;
}
如果在自定义组件的样式中加scoped属性，则全局样式对该组件无效；
如果在App.vue中定义scoped属性，则其定义的属性对其他组件的样式无影响。
很多前端开发者在写样式代码的时候，不喜欢用原生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="sass"属性，这样就会将style中的代码识别为sass语法。
作者：cutercorley
