Vue Initialization-李状的博客

Vue 简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Create Vue3.x project

Install Node, npm, vue-devtools

Install cnpm:

url: https://npm.taobao.org/
command: npm install -g cnpm --registry=https://registry.npm.taobao.org

Install vue-cli:

//vue-cli3.x:
npm install -g @vue/cli
//vue-cli2.x:
npm install -g vue-cli

Initialization project:

//vue-cli3.x:
vue create app-name
//or:
vue ui
//vue-cli2.x:
vue init webpack app-name

Install npm dependencies package:
```
cd app-name
npm install
```
Build project:
```
npm run build
```

Run project:

//vue-cli3.x:
npm run serve
//vue-cli2.x:
npm run dev

Issue

Create project:

Q: Use history mode for router?
A: 选择路由模式: Yes->history, No->hash

Q: Pick a CSS pre-processor
A: CSS 的预编译工具:
   * Sass/SCSS (with dart-sass) -> 保存后才会生效, sass 官方主力推dart-sass, 最新的特性都会在这个上面先实现
   * Sass/SCSS (with node-sass) -> 实时自动编译
   * Less
   * Stylus -> 不支持原生 CSS 写法

Q: Pick a linter / formatter config
A: 规则强度: airbnb > standard > recommended.
   * ESLint with error prevention only
   * ESLint + Airbnb config
   * ESLint + Standard config
   * ESLint + Prettier
   * TSLint (deprecated)

Config npm run xxx commad script:

//package.json > scripts:
//vue-cli3.x:
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
},
//vue-cli2.x:
"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "lint": "eslint --ext .js,.vue src",
  "build": "node build/build.js"
},

eslint:

Error: Expected linebreaks to be 'LF' but found 'CRLF'

//在`.eslintrc.js` > `rules` 中配置`windows`开发环境:
"linebreak-style": [0 ,"error", "windows"],

Error: Expected indentation of 2 spaces but found 4

//TODO:
//在`.eslintrc.js` > `rules` 中配置`indent`:
"indent": "off",

「下次一定」

Vue Initialization

TOC

Vue 简介

Create Vue3.x project

Issue

FEATURED TAGS