创建第一个 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(用来设置环境变量及数据接口域名)