vue-cli 安装

依赖

λ node -v
v12.16.2

λ npm -v
6.14.4

安装

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g @vue/cli

创建应用

创建

vue create vue-hello

生成后的目录如下：

λ ls -a

.git/  .gitignore  babel.config.js  node_modules/  package.json  package-lock.json  public/  README.md  src/

文件介绍

.git  git 相关文件
.gitignore  git 忽略配置
babel.config.js babel 相关配置
node_modules  npm 安装包文件夹
package.json npm 配置
package-lock.json 锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致。
public 公共资源文件夹
README.md 说明文档
src 源目录

.gitignore

默认内容如下:

.DS_Store
node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

package.json

{
  "name": "vue-hello",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

public 文件夹

下面两个文件：

favicon.ico   #vue 的 logo

index.html    #初始化页面

• index.html

  
    
    
    
    favicon.ico">
    
  
  
    
      We're sorry but  doesn't work properly without JavaScript enabled. Please enable it to continue.

参考资料

https://v3.cn.vuejs.org/guide/introduction.html#声明式渲染

package-lock.json的作用