搭建第一个简易vue工程

1. 创建vue工程

打开 Visual Studio Code 开发工具

或通过cmd命令窗口

vue init webpack website

工程界面目录功能结构说明：

2. 运行vue项目

cd website

npm run dev

根据控制台输出的访问地址，在浏览器中打开

Your application is running here: http://localhost:8080

3. 首页 index.html

工程编译后，首页对应的节点会被动态替换

4. 应用主函数程序入口 main.js

5. 主页面 App.vue

 6. 请求路由 router/index.js

 

7. 组件的引入及使用

8. 样式文件的引入

在App.vue主页面中引入全局样式后，子页面可以直接引用全局样式

 子页面限定样式文件的作用域

 9. vue ajax配置axios 

  cd 项目根目录，如website，

  // 安装axios模块；
  npm install axios   
     
   // main.js 追加引用配置
   import axios from 'axios' // 引入axios
   Vue.prototype.$http=axios; // 修改Vue的原型属性

 

   使用axios 发起请求（示例）：

    /*import [命名] from [相对路径]*/
    import footerNav from '../../components/footer.vue';

    /*再用components:{ [命名] }局部注册*/
    export default{
        components: {
            footerNav
        },
        data(){
            return{
                isNowPage: true,
                showAdd: false,
                showEdit: false,
                peoples: [{'name':'Jack'},{'name':'Joe'}],
                nameValue: '',
                newName: '',
                editId: 0
            }
        },
        methods: {
            add(){
                let that = this;
                that.showAdd = true;

                let baseRequest = {
                    "appId":13,
                    "unionId":"ohKVFwEMq5OPct3F5T1gLMBiDBPE",
                    "param":{"appId":""}
                };
                that.$http.post(
                    "http://192.168.2.133:8080/demo/api/user/personCenter",
                    JSON.stringify(baseRequest),
                    {headers: {'Content-Type': 'application/json'}}
                    ).then(function(res){
                        console.log(res);

                        let data = res.data.data;
                        data.name = data.userId;
                        that.peoples.push(data);

                    }).catch(function (error) {
                        console.log(error);
                    });
            },
            addName(){
                let v = this.nameValue;
                if(v.trim() === ""){
                    alert("请输入新增人员姓名")
                }else{
                    let data = {};
                    data.name = v;
                    this.peoples.push(data);
                    this.showAdd = false;
                }
            },
            del(e){
                let id = e.target.offsetParent.id;
                this.peoples.splice(id,1)
            },
            edit(e){
                let id = e.target.offsetParent.id;
                this.showEdit = true;
                this.editId = id;
                this.newName = this.peoples[id].name
            },
            cancel(){
                this.showEdit = false
            },
            editName(){
                let v = this.newName;
                if(v.trim() === ""){
                    alert("请输入姓名")
                }else{
                    this.peoples[this.editId].name = this.newName;
                    this.showEdit = false
                }
            }
        }
    }

10. 导入element-ui

 cd website

 npm install element-ui
 依赖包都会下载安装在项目更目录下的node_modules中