创建vue项目
转自:https://www.cnblogs.com/hackyo/p/7988399.html
需要先安装好nodejs和npm
命令行输入下面的命令查看是否成功安装、出现版本号则安装成功、
一、开始
创建文件夹、(工作目录)
自定义工作目录、
工作目录:F:\workspace\workspacespringbootnew\vue
打开命令行安装npm镜像、
npm i -g cnpm --registry=https://registry.npm.taobao.org
如果权限不够,请使用管理员运行命令提示符
安装vue-cli,vue脚手架:
cnpm i -g vue-cli
测试是否安装成功:
vue -V
二、安装
进入我们的工作目录:F:\workspace\workspacespringbootnew\vue
命令行输入:
f:
cd F:\workspace\workspacespringbootnew\vue
使用脚手架安装项目:
vue init webpack demo
-
提示目录已存在,是否继续:Y
-
Project name(工程名):回车
-
Project description(工程介绍):回车
-
Author:作者名
-
回车后会出现继续回车
-
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
三、初始化
进入项目目录:
F:\workspace\workspacespringbootnew\vue\vue
初始化项目:
cnpm i
运行项目:(修改项目启动名:打开项目找到package.json文件修改如下
)
cnpm run vue
浏览器打开:localhost:8080,即可看到vue项目
Ctrl+C退出运行
安装项目依赖,分别是scss支持,ajax工具,element ui,两个兼容包
sass一种相似与css的文件
axios,vue中的ajax,用于后台交
cnpm i node-sass -D
cnpm i sass-loader -D
cnpm i axios -D
cnpm i element-ui -D
cnpm i babel-polyfill -D
cnpm i es6-promise -D
IntelliJ IDEA打开vue项目
file->open...->项目路径
File - Settings - Languages&Frameworks - JavaScript:修改JavaScript language version为ECMAScript 6,确认
File - Settings - Plugins:搜索vue,安装Vue.js 需Restart IntelliJ IDEA
File-Setting-FileAndCode complates,idea创建不了vue文件,此处创建vue模板文件
<template>
<div> {{msg}}</div>
</template>
<style></style>
<script>
export default{ data () { return {msg: 'vue模板页'} } }
</script>
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文件,找到
项目访问端口为8080改为8070
port: 8080
修改为
port: 8070
Vue打包后出现一些map文件的解决办法:
改为false。不然在最终打包的文件中会出现一些map文件,map文件的作用在于:项目打包后,
代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。
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下创建api文件夹,api下创建index.js
src下创建utils文件夹,utils下创建index.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中编辑和运行。
选择Vue,运行可运行Build项目,选择build可编译vue项目
也可如下方法运行:npm run vue
打包:npm run build
打好的包存放在项目源码路径下 dist
注:使用static里的文件尽量使用绝对路径,如/static/image/background.png
使用src里的文件则尽量使用相当路径。
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>