vue-cli

crainyday

前端 / Vue

发布于：2019年8月7日

字数：1.2k字

时长：5分钟

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

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

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

相关的命令:
1
2
3
4
5
6
7
8
9
#安装脚手架
npm install -g vue-cli
#初始化项目xxx
vue init webpack xxx
cd xxx
#下载项目文件
npm install
#编译运行项目
npm run dev
之后浏览器访问: http://localhost:8080/ 即可访问该项目.

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

①项目整体目录结构

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

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

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

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

②src目录结构

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模板代码:

<template>
    
</template>

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

<style>

</style>

HelloWorld.vue:

<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:

<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:

/*
项目入口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	npm install -g serve #全局安装静态服务器 serve dist #运行项目, 访问: http://localhost:5000 即可

发布2:使用动态web服务器(像: tomcat)

//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所给出的提示, 如下图.

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

①一个个的根据ESLint的提示去掉, 以后写的时候注意.

②通过配置项目根目录下的.eslintrc.js文件去掉, 更改里面的 rules对象配置即可.

③霸道的方法, 直接更改.eslintignore配置文件, 将要忽略的文件名写在里面.