项目前导 学习笔记
一、vue-cli
1.1、介绍
vue-cli
是和 vue 进行深度组合的工具,可以快速帮我们创建 vue 项目,并且把一些脚手架相关的代码给我们创建好。一般使用 vue 开发项目,都是用 vue-cli
来创建项目的。
1.2、安装
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐8.11.0+)。node 环境安装后,直接通过 npm install -g @vue/cli
即可安装。安装完成后,输入 vue --version
,如果出现了版本号,说明已经下载完成。
二、使用
2.1、用命令行创建项目
-
在指定路径下使用
vue create [项目名称]
创建项目。 -
会让你选择要安装哪些包(默认是 Babel 和 ESLint ),也可以手动选择。
-
如果在安装的时候比较慢,可以在安装的时候使用淘宝的链接:
vue create -r https://registry.npm.taobao.org [项目名称]
。 -
如果实在不想在创建项目的时候都指定淘宝链接,可以在当前用户目录下,找到
.npmrc
,然后设置registry=https://registry.npm.taobao.org
。
2.2、用界面创建项目
-
打开 cmd,进入到你项目存储的路径下。然后执行
vue ui
,就会自动打开一个浏览器界面。 -
按照指引进行选择,然后一顿下一步即可创建。
2.3、用界面创建项目
-
node_modules
:本地安装的包的文件夹。 -
public
:项目出口文件。 -
src
:项目源文件:assets
:资源文件,包括字体,图片等。components
:组件文件。App.vue
:入口组件。main.js
:webpack
在打包的时候的入口文件。
-
babel.config.js
:es*
转低级js
语言的配置文件(就是为了向下兼容)。 -
package.json
:项目包管理文件。
2.4、组件定义和导入
- 定义: 组件定义跟之前的方式是一模一样的。只不过现在模板代码专门放到
.vue
的template
标签中,所以不再需要在定义组件的时候传入template
参数。另外,因为需要让别的组件使用本组件,因此需要用export default
将组件对象进行导出。
在 components 文件夹下创建文件 MyPage.vue 文件
<template>
<div class="mypage">
<h1>我的view</h1>
<p class="info">{{info}}</p>
</div>
</template>
<script>
export default{
data: function(){
return {
info: "这是我的第一个组件页面"
}
}
}
</script>
<style>
.info{
background-color: aquamarine;
}
</style>
- 导入: 因为现在组件是在不同的文件中。所以如果需要引用,那么必须进行导入。用 ES6 语法的
import aaa from vue文件的路径
,其中 aaa 是自己起的组件的别名。
App.vue 文件
<template>
<div id="app">
<ABC></ABC>
</div>
</template>
<script>
import ABC from "./components/MyPage.vue"
export default {
name: "app",
components: {
"ABC": ABC
}
}
</script>
<style scoped>
body{
font-size: 43px;
}
</style>
2.5、局部样式
默认情况下在 .vue
文件中的样式一旦写了,那么会变成全局的。如果只是想要在当前的组件中起作用,那么可以在 style
中加上一个 scoped
属性即可。示例代码如下:
<style scoped>
.info{
background-color: red;
}
</style>
2.6、使用 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 语法。
三、运行
最后说一下怎么运行这个项目呢,当然不是直接打开 html 文件了。
- 运行 cmd 中
- 进入到项目文件夹
cd 文件路径
- 开启服务
npm run server
- 开启之后会返回两个链接,访问即可