VUE 全家桶 vue-cli 2 | vue-cli 3

作者: 快乐的大鹅 | 来源:发表于2018-05-16 11:42 被阅读2133次

vue基础
VUE 全家桶 vue-cli 2 | vue-cli 3
Vue项目结合Element-UI的两种方式
用vue-cli快速搭建vue项目
Vue 脚手架3 （CLI3）的介绍
vue学习记录
vue-cli 3与2版本有什么区别
认识 VUE
使用vue-router
vue-cli中vue-scroller的详细用法，上拉加载下拉

安装Node.js

官网下载，一直下一步

查看是否安装成功.png

npm 淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org

安装Webpack

npm install webpack -g

因为之前安装过，查看是否安装成功时，有如下提示

提示.png

执行npm install webpack-cli -D

报错如下

报错.png

尝试全局安装webpack-cli

安装成功.png

再次查看webpack是否安装成功

查看是否安装成功.png

安装vue-cli

npm install vue-cli -g

查看是否安装成功

查看是否安装成功.png

构建项目

新建目录vue-practice
e:
cd vue-practice
vue init webpack vue-sop

执行结果如下，红框部分输入N

结果.png

cd vue-sop
npm install

报错.png

尝试用 cnpm install

结果.png

执行npm run dev，启动项目

结果.png

发现没有自动打开浏览器

在sublime text 3 配置工程，项目-添加项目-选择刚才初始化好的目录

添加工程.png

找到config/index.js，修改18行： autoOpenBrowser: false,为autoOpenBrowser: true,

ctrl+c终止，npm run dev再次启动，可以自动打开了

结果.png

安装Element

npm i element-ui -S

安装Element.png

安装axios

npm i axios -S

图片.png

引入Element和axios

引入.png

编写src/App.vue

<el-menu-item index="/CreateApp">创建应用</el-menu-item>
这里的index属性指向路由

配置路由

router/index.js 如下

router/index.js.png

创建并编写components/CreateApp.vue和components/AppList.vue

遇到的问题

只能由一个vue实例，所以每个.vue的脚本必须只能用export default {}的写法
注意vue不允许并列的页面元素出现在template标签下，必须用一层div包裹一下，才可以元素并列
element-ui是24栅格
data的写法如下，需要添加return

data() {
        return {
            createAppForm:{
                client_id: '',
                client_secret: '',
                client_name: '',
            },
            active: 0,
            createAppRule:{
                client_name:[
                    { required: true, message: '请输入应用名称', trigger: 'blur' },
                ]
            }
        }
    },

生命周期的钩子函数mounted()可以实现元素渲染完毕后，渲染数据

再次启动工程查看效果

效果.png

安装Echarts

npm i echarts -S

结果.png

引入Echarts

引入Echarts.png

编写Dashboard.vue并配置路由

效果.png

封装工具

编写 assets/util-api.js

关键
export {formateDate};
export {REQ_URL}

在main.js引入

关键
import {formateDate} from './assets/util-api'
import {REQ_URL} from './assets/util-api'

Vue.prototype. $formateDate = formateDate Vue.prototype.$ REQ_URL = REQ_URL

在Dashboard.vue执行

关键
let day = this. $formateDate(1); this.$ axios.get(${this.$REQ_URL.a}/api/allaccess/day?day=${day})
.then(response => {
this.yesterday_call_count = response.data.success_count;
})