如何搭建一个vue项目(完整步骤)

目录

一、安装node环境

二、搭建vue项目环境

三、vue项目目录讲解

四、开始第一个vue项目

五、重点补充

---

快速创建vue2.0项目

vue init webpack my-project

npm i element-ui -S

npm install --save vue-axios

npm install --save nprogress

npm install echarts --save-dev（尽量使用echarts5版本npm install --save-dev echarts@^5.0.1）

# 卸载 Echarts5.0
npm uninstall echarts
# 规定版本来安装（选择自己喜欢的版本安装）
npm install echarts@4.8.0 --save
 # 导入使用
import echarts from 'echarts'

安装less

使用<style lang="less" scoped>

先npm install less less-loader --save 再卸载npm uninstall less-loader

再npm install less-loader@4.1.0 --save 就ok

最后npm run dev

　npm install moment --save

 import axios from 'axios'

Vue.prototype.$http = axios

/*引入下面三行*/

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

//引入echarts

import * as echarts from 'echarts';

Vue.use(echarts)

Vue.prototype.$echarts = echarts;

import moment from 'moment'; //导入模块

moment.locale('zh-cn'); //设置语言 或 moment.lang('zh-cn');

Vue.prototype.$moment = moment; //赋值使用

页面使用this.$moment(new Date()).format('YYYYMMDDHH'),//当前系统时间改的编号

startDate: this.$moment(this.value12[0]).format("YYYY/MM/DD HH:mm:ss"),

springboot集成vue项目

参考：如何搭建一个vue项目 - 请叫我淑女好吧 - 博客园

一、安装node环境

       1、下载地址为：Node.js

　　2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功

　3、为了提高我们的效率，可以使用淘宝的镜像：npmmirror 中国镜像站

　　输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。

检查是否安装成功：

二、搭建vue项目环境

      1、全局安装vue-cli

　　npm install --global vue-cli

三、vue项目目录讲解

四、开始第一个vue项目

五、重点补充

vue2安装的插件

vue init webpack my-project

npm install vue-router --save-dev 改成
npm install --legacy-peer-deps vue-router@3.5.2

npm i element-ui -S

npm install sass-loader@7.0.1 --save-dev
npm install node-sass --save

npm install style-loader --save  改成
npm install --legacy-peer-deps style-loader@3.3.1

 接下来，在build/webpack.base.config.js中的rules里面添加：
    {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      }

npm install --save vue-axios

npm install --save nprogress

npm install echarts --save-dev