创建vue项目详解

vue.js使用(前后端分离)

1：安装node.js 环境

Node.js简介
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。

（1）下载对应你系统的Node.js版本:Download | Node.js

orDownload | Node.js (nodejs.org)

选择合适的系统及bit

 安装完成后 node -v 检查一下是否安装成功  查看一下版本

 注：新版的Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西

当下载好Node后我们就可以使用npm命令进行包的管理，接下来打开终端：

 ​

环境配置  不想配置的人可以忽略

说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。
例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹【D:\Develop\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图： 

 

然后打开命令行输入

​​​​npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

 接下来设置环境变量，关闭cmd窗口，“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

进入环境变量对话框，在【系统变量】下新建【NODE_PATH】，输入【D:\Program Files\nodejs\node_global\node_modules】，将【用户变量】下的【Path】修改为【D:\Program Files\nodejs\node_global】 

阿里镜像cnpm安装

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

• 通过npm安装模块时都是去国外的镜像下载的，有的时候由于网络原因会导致安装模块失败，好在阿里有团队维护国内镜像:npmmirror 中国镜像站 上面有使用说明
• 其实更推荐大家用yarn，因为更快，安装地址：https://yarnpkg.com/zh-Hans/docs/install

 

二. 搭建vue项目环境

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

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

查看安装的版本（显示版本号说明安装成功）

• 如果你原来有版本或者版本比较低，可以升级
  1|npm update -g @vue/cli
2|yarn global upgrade --latest @vue/cli 

vue2
1.创建一个基于 webpack 模板的新项目 :【vue init webpack ”项目名称“】
2.输入属性
3.安装项目：【npm install】
4.运行项目：【npm run dev】

vue2.+
1.创建新项目 :【vue create ”项目名称“】
2.输入属性
3.运行项目：【npm run serve】
 

 

 

*号键是被选上的

 选择版本 路径模式

 代码检查

什么时候检查代码

 第三方文件存在的方式  ，，独立的文件或是 综合的文件

是否保存本次配置信息（保存预设）

• 这里如果选择保存的话，就要输入名字，默认就是文件夹的名字，下次配置的时候就会显示这个文件配置的选项就像上面的一样，在配置的时候会多出来一个

 

运行

• cd到项目文件夹下面
• npm run serve
• 

dist 文件夹：默认 npm run build 命令打包生成的静态资源文件，用于生产部署
node_modules：存放npm命令下载的开发环境和生产环境的依赖包
public：有的叫assets：存放项目中需要用到的资源文件，css、js、images以及index
src文件夹：存放项目源码及需要引用的资源文件

• api文件夹：放ajax相关操作的代码文件:index.js(相关的接口),ajax.js(封装的axios,拦截器)。有的叫service：自己配置的vue请求后台接口方法
• common文件夹：stylus的混合文件.styl，不要写到public也可以
• components文件夹：存放vue开发中抽离的一些公共组件
• mock文件夹：mock数据存放文件及mock模拟接口（没有后台接口或接口不完整情况下可以模拟后台接口）
• pages文件夹：涉及到路由的组件
• router文件夹:vue-router，路由器及路由的配置
• store文件夹：存放 vue中的状态数据，用vuex集中管理

App.vue文件：使用标签渲染整个工程的.vue组件
main.js文件：vue-cli工程的入口文件
package.json文件：用于 node_modules资源部 和 启动、打包项目的 npm 命令管理

• "name": 包名
  "version": 包的版本号
  main: 入口文件，一般都是 index.js
  scripts：支持的脚本，默认是一个空的 test
  keywords：关键字，有助于在人们使用 npm search 搜索时发现你的项目
  "description": 包的描述
  "author": 包的作者
  repository: 包代码的repo信息，包括type和URL，type可以是git或者svn，url则是包的repo地址。
  license：默认是 [MIT],项目许可证，让使用者知道是如何被允许使用此项目。
  "dependencies": 生产环境依赖包列表
  "devDependencies": 开发环境、测试环境依赖包列表
  engines: 声明项目需要的node或npm版本范围

build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库
config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同，常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等