Vue Cli3项目创建

Vue Cli3脚手架

基本配置

• 安装Node.js

  • 保证Node.js或更高版本
  • 终端中输入node -v，保证已安装成功

• 安装淘宝镜像

  • npm install -g cnpm -- registry=https://registry.npm.taobao.org
  • 以后的npm可以用cnpm代替

• 安装Vue CLI3脚手架

  • cnpm install -g @vue/cli
  • 输入 vue -V，检查版本是否正确

快速原型开发

使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速的原型开发

这需要先额外安装一个全局扩展：npm install -g @vue/cli-service-global

vue serve 的缺点是它需要安装全局依赖，这使得它在不同机器上的一致性得不到保证。因此只适用于快速原型开发

初始化

1. cd到目录，或者在vs code中打开文件夹，终端中输入 npm init

2. 然后就是填写项目信息，第一个项目名称，其他选填，会在目录下生成一个模块的配置文件 package.json

3. 目录下新建一个 App.vue 文件

<template>
    <div>
    	<h3>{{msg}}</h3>
    </div>
</template>

<script>
    export default {
        data() {
            return {
            	msg: "vue-cli3开发单文件组件"
            };
        }
    };
</script>

<style lang="" scoped>
    h3 {
    	color: red;
    }
</style>

终端中输入 vue serve 运行这个App.vue文件

vue-cli3生成项目

使用 vue create name 命令生成项目

Vue CLI v4.3.1
? Please pick a preset:    
  default (babel, eslint)  
> Manually select features 

这里是选择一个预设，可以先选择 Manually select features ，进入选择，初学只需选择 Babel 和 Linter / Formatter，然后按照下方的选择进行

Vue CLI v4.3.1
? Please pick a preset: 
  Manually select features
? Check the features needed for your project: 
  Babel, CSS Pre-processors, Linter
? Pick a linter / formatter config: 
  Basic
? Pick additional lint features: 
  Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? 
  In dedicated config files
? Save this as a preset for future projects? 
  yes
? Save preset as: 
  singPage

等待项目脚手架下载完成

�  Successfully created project mysite.
�  Get started with the following commands:

 $ cd mysite
 $ npm run serve

cd 到项目目录 — npm运行

项目下的文件作用

.eslintrc.js — 根据编写的代码进行校验，如果编写不规范或编写错误会立即提示报错

.gitignore — 上传打包时忽略的文件夹和文件

.postcssrc.js — 针对于处理css3时，对浏览器css前缀的一个处理

babel.config.js — 针对于有es6语法时，会在这里下载一些插件，完成对es6语法的编译

package.json 和 package-lock.json 存放包管理配置文件

{
  "name": "mysite",
  "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.4",
    "vue": "^2.6.11"
  },
  "devDependencies": {  //开发依赖
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  }
}

node_modules — 存放项目依赖、开发依赖所有的文件，不要做任何修改，一旦误修改无法撤销，建议全部删除然后运行npm install，它会根据packge.json内的依赖进行下载

public 存放静态资源，当前项目下的静态资源放在当前文件夹内进行加载，public内的index.html是整个项目的入口文件

src是主要关注的文件夹，assets存放当前项目的依赖，components存放组件，main.js为整个项目的入口文件