1.下载对应本机环境安装 nodejs 默认NPM已经集成
https://nodejs.org/zh-cn/
打开cmd直接输入测试是否安装成功
node -v
npm -v
2.安装淘宝镜像。
打开cmd直接输入:
npm install -g cnpm –registry=https://registry.npm.taobao.org
3.安装webpack 。
cnpm install -g webpack
4.安装vue
cnpm install -g vue
5.安装 vue-cli。
cnpm install -g vue-cli
6.安装 element-ui。
cnpm install -g element-ui -S
7.安装 mockjs 演示数据安装(选择安装)
npm install mockjs
8.环境安装完毕 现在可以创建一个项目。
选择项目所在文件夹 shift+右键 选择在此处打开命令窗口
项目创建命令:vue init webpack vue-projectname。
projectname–项目文件夹的名称(名字不能用中文),这个vue-projectname文件夹会自动生成在你跳转到的工作目录中。
vue init webpack vue-projectname
提示目录已存在,是否继续:Y
Project name(工程名):回车
Project description(工程介绍):回车
Author:作者名
Vue build(是否安装编译器):回车
Install vue-router(是否安装Vue路由):回车
Use ESLint to lint your code(是否使用ESLint检查代码,我们使用idea即可):n
Set up unit tests(安装测试工具):n
Setup e2e tests with Nightwatch(也是测试相关):n
Should we run `npm install` for you after the project has been created? (recommended):选择:No, I will handle that myself
注意:安装过程中,需要自行输入项目名称,描述,作者等等, 按照提示操作。
9.选择项目所在文件夹 shift+右键 选择在此处打开命令窗口 运行命令cnpm install 安装依赖包。
cnmp install
10.启动测试项目是否安装成功。
cnpm run dev
注意:打开config目录下的index.js 默认是8080端口 可以修改为你想要的端口号
11.生产环境部署。选择项目所在文件夹 shift+右键 选择在此处打开命令窗口 运行命令
npm run build
注意:dist 下生生成的文件就是我们要部署的文件
四、配置idea
- File - Settings - Languages&Frameworks - JavaScript:修改JavaScript language version为ECMAScript 6,确认;
- File - Settings - Plugins:搜索vue,安装Vue.js;
- Run - Edit Configurations…:加号,选择npm,Name为Dev,package.json选择你工程中的package.json,Command为run,Scripts为dev,然后就可以直接在idea中运行了。
- Run - Edit Configurations…:加号,选择npm,Name为Build,package.json选择你工程中的package.json,Command为run,Scripts为build,然后就可以直接在idea中打包了。
五、修改项目配置
修改/config/index.js文件,找到
port: 8080
修改为
port: 8070
productionSourceMap: true
修改为
productionSourceMap: false
修改/build/webpack.base.conf.js文件,找到
module.exports = {
entry: {
app: './src/main.js'
},
修改为
module.exports = {
entry: {
app: ['babel-polyfill', './src/main.js']
},
最后在src/main.js中加入
import 'es6-promise/auto'
import promise from 'es6-promise'
import Api from './api/index.js'
import Utils from './utils/index.js'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.prototype.$utils = Utils;
Vue.prototype.$api = Api;
Vue.use(ElementUI);
这样,一个差不多完整的vue项目就ok啦,并且可以在idea中编辑和运行。
注:使用static里的文件尽量使用绝对路径,如/static/image/background.png
使用src里的文件则尽量使用相当路径。
六、相关技术:
vuejs2.0:渐进式JavaScript框架,易用、灵活、高效,似乎任何规模的应用都适用。
element:基于vuejs2.0的ui组件库。
vue-router:一般单页面应用spa都要用到的前端路由。
vuex:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
附(我的vue项目结构):
src文件夹
├── App.vue // APP入口文件
├── api // 接口调用工具文件夹
│ └── index.js // 接口调用工具
├── components // 组件文件夹
├── frame // 子路由文件夹
├── main.js // 项目配置文件
├── page // 页面组件文件夹
├── router // 路由配置文件夹
│ └── index.js // 路由配置文件
├── style // scss 样式存放目录
│ ├── base // 基础样式存放目录
│ │ ├── _base.scss // 基础样式文件
│ │ ├── _color.scss // 项目颜色配置变量文件
│ │ ├── _mixin.scss // scss 混入文件
│ │ └── _reset.scss // 浏览器初始化文件
│ ├── scss // 页面样式文件夹
│ └── style.scss // 主样式文件
└── utils // 常用工具文件夹
└── index.js // 常用工具文件
static文件夹
├── css // css文件夹
├── js // js文件夹
├── image // 图片文件夹
└── font // 字体文件夹
scss引入方法,例
<style lang="scss">
@import "./style/style.scss";
</style>