需要先安装好nodejs和npm
输入下面的命令查看是否成功安装
?
一、开始
工作目录:IdeaProjects
使用idea新建Static Web项目:demo
在demo目录下新建node_modules文件夹
因为后面node_modules中的内容太多,并且我们不会用到,所以在idea中右键该文件夹,选择Mark Directory as - Excluded
打开命令提示符
首先安装使用淘宝npm镜像:
?
1 | npm i -g cnpm --registry=https: //registry.npm.taobao.org |
如果权限不够,请使用管理员运行命令提示符
安装vue-cli,vue脚手架:
?
测试是否安装成功:
?
二、安装
进入我们的工作目录:
?
使用脚手架安装项目:
?
?
1 2 3 4 5 6 7 8 9 10 | 提示目录已存在,是否继续: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 |
三、初始化
进入项目目录:
?
初始化项目:
?
运行项目:
?
浏览器打开:localhost:8080,即可看到vue项目
Ctrl+C退出运行
安装项目依赖,分别是scss支持,ajax工具,element ui,两个兼容包
?
?
1 2 3 4 5 6 7 8 9 | cnpm i sass-loader -D cnpm i axios -D cnpm i element-ui -D cnpm i babel-polyfill -D cnpm i es6-promise -D |
配置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中运行了。
继续点击加号,选择npm,Name为Build,package.json选择你工程中的package.json,Command为run,Scripts为build,然后就可以直接在idea中打包了。
修改项目配置
修改/config/index.js文件,找到
?
1 2 3 | port: 8080 修改为 port: 8070 |
?
1 2 3 | productionSourceMap: true 修改为 productionSourceMap: false |
修改/build/webpack.base.conf.js文件,找到
?
1 2 3 4 5 6 7 8 9 | module.exports = { entry: { app: './src/main.js' }, 修改为 module.exports = { entry: { app: [ 'babel-polyfill' , './src/main.js' ] }, |
最后在src/main.js中加入
?
1 2 3 4 5 6 7 8 9 10 | 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里的文件则尽量使用相当路径。
附(我的vue项目结构):
src文件夹
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | ├── 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文件夹
?
1 2 3 4 | ├── css // css文件夹 ├── js // js文件夹 ├── image // 图片文件夹 └── font // 字体文件夹 |
scss引入方法,例
?
1 | <style lang= "scss" type= "text/css" data-filtered= "filtered" > @import "./style/style.scss" ;</style> |