vue.js-使用vue-cli3快速创建项目

vue-cli作为vue的脚手架，集成了webpack环境及主要依赖，对于项目的搭建、打包、维护管理都非常方便。

Vue.js 全家桶系列：包含了 vue-router、vuex、vue-resource，以及本文介绍的构建工具 vue-cli。这些是一个完整的 vue 项目的核心构成。

一、环境搭建

安装node

2.安装vue-cli

（1）运行如下命令安装：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

如果是mac系统命令前需要加sudo,否则报如下错误，需要以管理员身份执行命令

npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules/@vue/cli/node_modules/@babel/compat-data
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules/@vue/cli/node_modules/@babel/compat-data'
npm ERR!  [Error: EACCES: permission denied, access '/usr/local/lib/node_modules/@vue/cli/node_modules/@babel/compat-data'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules/@vue/cli/node_modules/@babel/compat-data'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/baihuina/.npm/_logs/2020-12-11T07_51_22_127Z-debug.log

（2）以后如果要升级 vue-cli，运行如下命令：

npm update -g @vue/cli

# OR
yarn global upgrade --latest @vue/cli

（3）测试下 vue-cli 是否安装成功
---运行如下命令（注意最后的 V 是大写）：

vue -V
# OR
vue --version

如果出现相应的版本号，则说明安装成功。

二、构建项目

（1）创建文件目录并进入

mkdir vue-code & cd vue-code

（2）vue create 创建一个新项目

vue create my-project

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

default (babel,eslint) 默认，提供babel和eslint支持

Manually select features 自己选择需要的功能，使用上下方向键来切换，按下空格选中或取消。

1、TypeScript -- 支持使用 TypeScript 书写源码。
2、Progressive Web App (PWA) Support -- PWA 支持
3、Router -- vue-router
4、Vuex -- Vuex
5、CSS Pre-processors -- 支持 CSS 预处理器。
6、Linter / Formatter -- 支持代码风格检查和格式化。
7、Unit Testing -- 支持单元测试。
8、E2E Testing -- 支持 E2E 测试。

使用图形化界面 -- 会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

vue ui

三、启动项目

初始完之后进入项目根目录，执行命令

npm run serve

四、打包项目

开发完成后需要打包上线，vue-cli提供了相应的命令，在根目录执行

npm run build

执行完成后可以看到根目录多了一个dist文件夹，该目录就是所有打包好的静态资源，直接部署到静态资源服务器就可以了。

vue.js-使用vue-cli3快速创建项目