一、环境准备
首先我们需要在自己的开发机器上安装nodeJs,如果不确定自己是否已经安装,可以使用以下命令查看:
node -v #查看node版本,检查是否安装node
npm -v
yarn -v
如果正常显示版本,则说明已经安装了nodeJs,如果没有安装,可以访问node官网:http://nodejs.cn/download/,下载安装node。
二、Vue CLI 全局安装
安装命令:
npm install -g vue-cli # -g 全局安装
使用npm可能会比较慢,我们可以使用cnpm -- npm 的国内镜像,使用 cnmp 的好处是在日后下载内容时会比较快,但是下载的包可能不是最新的。安装 cnpm 的命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用cnpm可能会出现问题,下载依赖失败,如果无法继续可以将node_modules 文件夹里面的依赖删除重新执行命令下载依赖。
安装完成以后,可以通过以下命令查看vue的命令用法 :
vue -h
三、初始化项目
初始化命令:
vue init webpack vue-blog(项目名称/文件夹名称)
init
:表示我要用vue-cli来初始化项目
<template-name>(
webpack)
:表示模板名称,vue-cli官方为我们提供了5种模板,
webpack-一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。
webpack-simple-一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。
browserify-一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
browserify-simple-一个简单Browserify+vueify的模板,不包含其他功能, 可以快速的搭建vue的开发环境。
-simple : 一个最简单的单页应用模板。
<project-name>(vue-blog)
:标识项目名称,这个你可以根据自己的项目来起名字。
执行命令会开始下载一个我们指定名称的项目,我们需要指定以下项目参数。项目名称直接使用默认的,选择安装 vue-router,ESLint是代码质量检测工具,这里我选择安装。
- Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写。
- Project description:项目描述,默认为A Vue.js project,直接回车,不用编写。
- Author:作者,如果你有配置git的作者,他会读取。
- Install vue-router? 是否安装vue的路由插件,选择Y。
- Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格,最好是进行配置。
- Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试。
四、启动项目
进入项目文件夹,执行依赖运行命令:
# 进入项目文件夹
cd vue-blog
# 运行项目-dev方式
npm run dev
项目构建成功之后,访问 http://localhost:8080,可以看到以下内容,说明部署完成。
五、项目文件配置介绍
- build(webpack的初始化配置)
- config(index.js--项目配置)
- node_modules(项目依赖模块,代码库)
- src(程序文件)
- static(静态文件资源)
- test(测试代码)
- index.html (项目首页入口)
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件,加载各种公共组件
|-- static // 静态文件,比如一些图片,json数据等
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.json // 项目基本信息
.