创建vue项目

时间 2020-12-27

转自：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

命令行输入：

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>