2020-10-31

创建第一个 Vue 项目

Step 1

1.1 安装node.js

• 链接
  链接：https://nodejs.org/en/
  建议下载 LTS 版本
  

Step 2

检查 node 版本和 npm 版本， 打开 cmd 输入 node -v查看版本node.js版本号，输入npm -v 查看npm版本号

虽然node自带npm，但不确定是最新版本的npm，建议更新，使用如下命令更新npm
npm install -g npm

Step 3

1.1 更换全局安装目录

npm config get prefix
npm config ls
npm config get regirtroy

1.2 win10中跟换环境变量位置

如果用户变量中已经有 npm config get prefix 获得的环境变量，请删除并替换

Step 4

1.1 创建一个 Vue 项目

1.2 Vue 项目目录结构

• build目录 构建脚本目录

1）build.js   ==>  生产环境构建脚本；　　　　
2）check-versions.js   ==>  检查npm，node.js版本；　　　　
3）utils.js   ==>  构建相关工具方法；　　　　
4）vue-loader.conf.js   ==>  配置了css加载器以及编译css之后自动添加前缀；　　　　
5）webpack.base.conf.js   ==>  webpack基本配置；　　　　
6）webpack.dev.conf.js   ==>  webpack开发环境配置；　　　　
7）webpack.prod.conf.js   ==>  webpack生产环境配置；

• config目录 项目配置

1）dev.env.js   ==>  开发环境变量；　　　　
2）index.js   ==>  项目配置文件；　　　　
3）prod.env.js   ==>  生产环境变量；　　

• node_modules目录
  npm加载的项目依赖模块

• src目录 开发目录

1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；　　　　
2）components：组件目录，我们写的组件就放在这个目录里面；　　　　
3）router：前端路由，我们需要配置的路由路径写在index.js里面；　　　　
4）App.vue：根组件；　　　　
5）main.js：入口js文件；

注意： 后续安装的一些插件需要在src当中建立相应的目录

• static目录
  静态资源目录

• index.html文件
  首页入口文件，可以添加一些 meta 信息等

• package.json文件
  npm包配置文件，定义了项目的npm脚本，依赖包等信息

• README.md文件
  项目的说明文档，markdown 格式

• .xxxx文件
  这些是一些配置文件，包括语法配置，git配置等

1.3 Vue 基本命令

• 安装到开发环境中
  npm install axios --save-dev
• 普通安装
  npm install axios --save

1.4 vue 插件基础安装

npm install axios --save
npm install vuex --save
npm install element-ui --save
npm install mockjs --save-dev

• 插件列表

Axios（官方推荐的ajax数据请求的插件）
Vue-Router（vue路由管理插件）
Vuex（vue数据中心化状态管理插件）
Less（css预处理插件）
Sass（css预处理插件）
Element-Ui（饿了么ui插件）
Mint-ui（移动端ui插件）
swiper-vue(swiper的vue包)
cross-env(用来设置环境变量及数据接口域名)

1.5 Vue 项目插件完毕建立相应目录

Step 5

1.1 运行Vue项目