Vue环境搭建

2019-05-29  本文已影响0人  過眼云烟

NodeJs开发环境安装

学习node,首先要安装node的环境,nvm是一款工具,使用这款工具可以很方便的下载所需版本的node文件以及npm,十分的方便。
NVM可以方便的在同一台设备上进行多个node版本之间切换

nvm-windows 最新下载地址:
https://github.com/coreybutler/nvm-windows/releases
nvm install lastest 64  //安装最新版NodeJs
nvm use 11.4.0           //使用指定版本NodeJs
    
搭建vue的开发环境 ,安装vue的脚手架工具 官方命令行工具
npm install --global vue-cli  /   cnpm install --global vue-cli         (此命令只需要执行一次)
创建项目 必须cd到对应的一个项目里面
    
        vue init webpack vue-demo01

        cd  vue-demo01 
        
        cnpm install   /  npm install          如果创建项目的时候没有报错,这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install
        
        npm run dev

另一种创建项目的方式 (推荐) ***
vue init webpack-simple vuedemo02

        cd  vuedemo02
        
        cnpm install   /  npm install        
        
        npm run dev

项目运行(拉取别人项目,缺少model,需要install,安装)
1、cd 到demo里面

    如:cd vuedemo

2、安装依赖:

    cnpm install   


3、运行项目

    npm run dev
Vue目录结构解析
node_modules  项目需要的各种依赖(根据package.json里的配置下载,拷项目出去不需要用到这个模块)
src 项目用到的所有资源
   assets资源文件
   App.vue 根组件(其他的组件都需要在此引入)
   main.js 实例化Vue组件
.babelrc的配置文件(不用管)
.editorconfig编辑器的配置文件
.gitignore过滤的文件
index.html  入口文件 (写移动端需要改动)
package.json 管理更各种依赖,及文件名称,描述,作者,版本等
README.md 项目的说明文件
webpack.config.js  webpack的配置文件,它能让vue文件打包成浏览器能识别的


vue的模板里面,所有的内容要被一个根节点包含起来
安装同步或异步数据传送
安装 vue-resource
1.npm install vue-resource --save  #加上--save代表将安装路径写入package.json,别人拷贝项目后能直接引用
2.在main.js里引入  import VueResource from 'vue-resource'
3.Vue.use(VueResource); #代表使用插件

安装axions
1安装 cnpm install axions --save
2.在哪里用,就在哪里引用 import 

vue生命周期


        beforeCreate(){
            console.log('实例刚刚被创建1');
        },
        created(){
            console.log('实例已经创建完成2');
        },
        beforeMount(){
            console.log('模板编译之前3');
        },
        mounted(){     /*请求数据,操作dom , 放在这个里面  mounted*/
            console.log('模板编译完成4');
        },
        beforeUpdate(){
            console.log('数据更新之前');
        },
        updated(){
            console.log('数据更新完毕');
        },
        beforeDestroy(){   /*页面销毁的时候要保存一些数据,就可以监听这个销毁的生命周期函数*/
            console.log('实例销毁之前');
        },
        destroyed(){
            console.log('实例销毁完成');
        }
上一篇 下一篇

猜你喜欢

热点阅读