CRainyDay

vue的组件化编码. Vue脚手架——即vue-cli

1.用vue-cli创建一个模板项目

vue-cli是vue官方提供的脚手架工具. 实际上也是一个库, 它从网上下载一个模板项目

相关的命令:

1
2
3
4
5
6
7
8
9
10
> #安装脚手架
> npm install -g vue-cli
> #初始化项目xxx
> vue init webpack xxx
> cd xxx
> #下载项目文件
> npm install
> #编译运行项目
> npm run dev
>

之后浏览器访问: http://localhost:8080/ 即可访问该项目.

在这里我们用的是 webpack 构建的脚手架, 当然也有其他的.

①项目整体目录结构

Vue2-1.1Vue2-1.2

.babelrc文件是babe的配置文件. babe 的功能: JSX转JS、ES6转ES5等. rc 即 runtime control(运行时控制)

.eslintignore文件. ESlint检查时忽略的文件的配置信息.

.eslintrc.js文件是 eslint 的配置文件. ESLint 是一个ECMAScript/JavaScript 语法规则和代码风格的检查工具.

package.json文件是当前应用的描述文件.

Vue2-1.3

②src目录结构

Vue2-1.4

assets文件夹与 static文件夹的区别:

  • 相同点: 文件夹里的资源在页面中都是可以引用的.
  • 不同点: 在js中使用assets下面的资源, 不能直接写路径, 路径会经过webpack中file-loader的编译.

动态绑定assets中的资源时, 要用require来引入该资源. 对于非第三方资源, 推荐放在assets中, 这里面的文件会经过webpack打包、重新编译. 而static中的文件, 不会经过重新编译. 项目在经过打包后, 会生成dist文件夹, static中的文件只是复制到dist文件夹中. static中建议放一些外部第三方资源文件.

2.基于脚手架编写项目

这里从头开始编写. 先删除项目src中的components文件夹、App.vue文件、main.js入口文件.

  • 先在src下新建一个main.js入口文件, 接着新建一个空白的vue文件和components文件夹.
  • 在components文件夹下新建一个HelloWorld.vue文件.
  • 在以上vue文件中编写上vue的模板代码: 如下. 之后可以自己创建一个vue模板文件.
  • 之后依次编写HelloWorld.vue、App.vue、main.js文件.

vue组件的使用步骤: ①引入组件 ②映射组件标签 ③使用组件标签

vue模板代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>

</template>

<script>
export default {//固定语法,向外暴露里面的配置对象.与编写Vue配置对象一致

}
</script>

<style>

</style>

HelloWorld.vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
<div>
<p class="msg">{{msg}}</p>
</div>
</template>

<script>
export default {
data(){//在Vue配置对象中data可以写对象也可以写函数. 但在这里必须写函数.
return {
msg:'Hello Vue!!!',
}
}
}
</script>

<style scoped>
.msg{
color: red;
font-size: 20px;
}
</style>

App.vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
<div>
<img class="logo" src="./assets/logo.png" alt="logo">
<!--3.使用组件标签-->
<HelloWorld/>
</div>
</template>

<script>
//1.引入组件
import HelloWorld from './components/HelloWorld.vue'
export default {
components:{
//2.映射组件标签
HelloWorld
}
}
</script>

<style scoped>
.logo{
width: 200px;
height: 200px;
}
</style>

main.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*
项目入口JS文件
*/
//1.引入组件
import Vue from 'vue'
import App from './App.vue'

new Vue({
el:'#app',
components:{
//2.映射组件标签
App
},
template: '<App/>'//3.使用组件标签
})

3.打包发布项目

打包项目: npm run build

发布项目:

  • 发布1: 使用静态服务器工具包.

    1
    2
    3
    >   npm install -g serve #全局安装静态服务器
    > serve dist #运行项目, 访问: http://localhost:5000 即可
    >
  • 发布2:使用动态web服务器(像: tomcat)

    1
    2
    3
    4
    5
    6
    7
    8
    >   //1.先修改配置: webpack.prod.conf.js
    > output:{
    > publicPath:'/xxx/' //xxx为打包文件夹的名字,注意名字前后一定要加'/'
    > }
    > //2.修改完配置后,再运行: npm run build 重新打包
    > //3.然后将dist文件夹名修改为上面的:xxx
    > //4.将xxx文件夹拷贝到正在运行的服务器根目录下.
    >

4.ESLint

ESLint是一个很流行的代码规范检查工具, 基本已经替代了JSLint. ESLint定义了一系列规则, 一旦你违反了其中一个规则, ESLint就会提示你.

从用脚手架编写完项目, 之后运行, 你会发现WebStrom的Terminal里ESLint所给出的提示, 如下图.

Vue2-1.5

当然, 作为一个专业的程序员. 看见它们你肯定会有强迫症, 想去掉它们.

  • ①一个个的根据ESLint的提示去掉, 以后写的时候注意.
  • ②通过配置项目根目录下的.eslintrc.js文件去掉, 更改里面的 rules对象配置即可.
  • ③霸道的方法, 直接更改.eslintignore配置文件, 将要忽略的文件名写在里面.

 评论



本博客所有文章除特别声明外,均采用[(CC BY-NC-SA 4.0)]许可协议。转载请注明出处!

本站使用 Material X 作为主题 , 总访问量为 次 。
Copyright © 2019 CRainyDay's Blog 版权所有