搭建一个vue项目

一、环境准备

1、安装node.js

下载地址：https://nodejs.org/zh-cn/
界面展示

2、检查node.js版本

查看版本的两种方式

node -v
node -version

出现版本号则说明安装成功（最新的以官网为准）

3、为了提高我们的效率，可以使用淘宝的镜像源

npm install -g cnpm --registry=https://registry.npm.taobao.org 
//即可安装npm镜像源

以后再用到npm的地方直接用cnpm来代替就好了，因为没有镜像源的话，安装速度比较慢.
检查是否安装成功

cnpm -v

二、搭建vue环境

1、全局安装vue-cli

这里注意：安装vue-cli对node.js的版本是有要求的

安装的两种方式：打开cmd命令

npm install -g @vue/cli //这个是从国外下载的比较慢
cnpm install -g @vue/cli //这个是从镜像源下载

2、查看vue/cli版本号

vue --version	//查看vue/cli版本号
vue -v 			//查看vue/cli版本号

3、升级vue/cli版本

npm update -g @vue/cli
cnpm global upgrade --latest @vue/cli
//两个命令效果相同

二、创建项目

1、创建项目

以管理员身份打开命令行界面，进入任意一个想要创建项目的文件夹
回车进行执行命令

vue create 项目名称

2、选择手动选择项目新特性项

回车进行下一步

? Please pick a preset:
  Default ([Vue 3] babel, eslint)		//vue/cli默认配置创建vue3版本项目
  Default ([Vue 2] babel, eslint)		//vue/cli默认配置创建vue2版本项目
> Manually select features		//手动选择功能

3、选择新特性

回车进行下一步
使用键盘的上下键切换选项；空格选中选项，带 * 号说明被选上了；enter回车进行下一步。

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

5、选择 vue 版本

回车进行下一步

? Choose a version of Vue.js that you want to start the project with
 3.x
> 2.x

6、选择 CSS 预处理器

回车进行下一步

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
> Less
  Stylus

7、选择 linter 规范

回车进行下一步

? Pick a linter / formatter config:
 ESLint with error prevention only			//仅具有错误预防功能的ESLint
 ESLint + Airbnb config							//ESLint的Airbnb配置
> ESLint + Standard config						//ESLint标准配置
 ESLint + Prettier

8、选择linter 验证时机

回车进行下一步

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to pr
oceed)
>(*) Lint on save				//保存时验证
 ( ) Lint and fix on commit			//提交时查找并修复

9、选择配置文件存放位置

回车进行下一步

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files				//单独文件保存
  In package.json								//保存在 package.json	文件中

10、配置是否形成预设，这里选择否

意思就是根据当前选择进行配置，下一次搭建项目可直接选择预定好的项目，不再进行之前每一步操作。
回车进行下一步

Save this as a preset for future projects?    (y/N)

11、运行项目

cd到项目文件夹下面
cd vue01
执行下面命令

npm run serve

三、项目目录介绍

public 目录中放置的是应用的 html 文件（通常只有一个 index.html）
public下有的叫assets：存放项目中需要用到的资源文件，css、images等。
src 目录中放置我们自己项目中所书写的源代码
src 下 main.js 是应用的入口 JS 文件
src下components是组件存放位置
.eslintrc.js 是 ESLint 的配置文件
babel.config.js 是 Babel 的配置文件
package.json 是项目配置文件
vue.config.js 是 Vue CLI 的配置文件