安装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.REQ_URL = REQ_URL

在Dashboard.vue执行

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

mounted()调用methods里面的方法需要this

例如.png

近日Vue CLI 3.0 发布了，尝试按照最新的脚手架做一下
官网参考地址

卸载原来的vue-cli

npm uninstall vue-cli -g

报错了

卸载vue-cli报错.png

尝试sudo

卸载成功.png

安装新的包

sudo npm install -g @vue/cli

注意包名变化.png

安装成功.png

vue -h查看命令

命令.png

创建一个项目

vue create vue-ex-vl3w4

用空格选择要安装的features

选择手动.png

之后还有很多特性的选择，此处略过，都选择好后等待下载

下载成功.png

启动一下看看

npm run serve

启动.png

启动成功.png

目录结构

可以看到用vue-cli 3 搭建到目录结构更简单了

目录结构.png

图形界面

vue ui可以在浏览器打开一个管理窗口

图形界面.png

待解决问题
1.如果新项目还想用旧版本如何下载

官方说明.png

3.下次创建新项目如何沿用本次的preset
4.配置浏览器自动打开
5.stylus的基本用法

张鑫旭翻译

vue-cli 3 webpack 4 iview 相互结合