Vue QuickStart

发表于 | 分类于 ，

Install

  • vue: npm install -g vue
  • vue-cil: npm install -g @vue/cli
  • vue-i18n: npm install -g vue-i18n

Vue3.0 前的 TypeScript 最佳入门实践
npm 快速入门

Launch App

  1. create hello app

    1
    vue create my-app

  2. launch app

    1
    npm run serve

Project Architecture

main.js 是我们的入口文件，主要作用是初始化vue实例并使用需要的插件。App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。

https://segmentfault.com/a/1190000014456796

UI Framework

Ant Design

  1. install 

    1
    npm i --save ant-design-vue

  2. import all components

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Vue from 'vue'
import Antd from 'ant-design-vue'
import App from './App'
import 'ant-design-vue/dist/antd.css'
Vue.config.productionTip = false

Vue.use(Antd)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

Ant Designe 快速上手

  1. Example Template
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
    <div>

    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue} from "vue-property-decorator";

    @Component
    export default class Nav extends Vue {

    }
</script>

<style scoped>

</style>

px to rem

create file .postcss.js on root direcotry

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = {
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        // to edit target browsers: use "browserslist" field in package.json
        "autoprefixer": {},
        "postcss-pxtorem": { // 此处为添加部分
            rootValue: 32, //  根元素(html)的字体大小。可根据js动态设置的html的font-size大小进行设置。对应16px 适配移动端750px宽度
            unitPrecision: 5, // 计算后的最小精度值，默认保留的就是5位, 最小精度，小数点位数
            propList: ['*', '!font*'],    //  !不匹配属性（这里是字体相关属性不转换）
            selectorBlackList: [],  //  设置哪些属性选择器（这里是属性选择器）忽略并保留px
            replace: true,
            mediaQuery: false,  //  是否允许在媒体查询中转换px
            minPixelValue: 2    //  替换的最小像素值。1px不想被替换就设置为2
        }
    }
}

postcss

vue-cli-2

Install Plugin

1
npm i --save postcss-pxtorem

[vue中postcss怎么配置]https://juejin.im/post/5bf5135251882516d725d1cc

vue-cli-3

vue-i18n

https://juejin.im/post/5aa7e18ff265da2384404334

vue-cli3 Resource

vue-cli3.0默认项目目录与2.0的相比，更精简:

  1. 移除的配置文件根目录下的，build和config等目录，
  2. 移除了static文件夹，新增了public文件夹，并且index.html移动到public中。
  3. 在src文件夹中新增了views文件夹，用于分类试图组件和公共组件。
  4. 大部分配置都集成到 vue.config.js 这里，在项目根目录下。

public文件夹下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（文件名需指定）下。必须使用绝对路径引用这些文件，简单说就是用来存放万年不变的文件。
在vue2.x版本类似 static 文件夹。

Images

1
2
3
<img src="/static/imgUrl"/>

<img src="@/assets/imgUrl"/>

CDN

https://juejin.im/post/5bb4ca3de51d450e7210d7c4

Build

http://blog.hecun.site/vue/vue%E5%A4%9A%E7%8E%AF%E5%A2%83%E6%89%93%E5%8C%85.html