浅谈vue.js 从配置环境到打包运行 （初学者适应）

demo实例https://download.youkuaiyun.com/download/zxd1314520/10634016

一、首先是配置环境

已经有很多文章写怎么配置环境了，这里我就简写了。

1.进入 vue 官网 下载 64位 安装包

https://nodejs.org/en/

 

2.安装完成后 配置环境变量

 

3.基于 Node.js 安装cnpm（淘宝镜像）

npm install -g cnpm --registry=https://registry.npm.taobao.org

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

 

4、安装Vue

cnpm install vue -g

 

5.安装vue命令行工具，即vue-cli 脚手架

cnpm install vue-cli -g

 

6.新项目的创建

（1）切换到一个空目录

mkdir newvues

cd newviews

（2）在当前目录下输入“vue init webpack 项目名称（使用英文）”。

vue init webpack myvue1

cd myvue1

cnpm install （安装依赖包）

cnpm run dev （运行）

 

我用的是淘宝镜像。cnpm install -----------cnpm  run dev开启一个项目

二、布局页面

找到APP.vue作为主通口，引入navigation来进入子页面。这里你需要安装navigation ,不然会报错navigation未定义 cnpm vue-navigation --save.回车后，你会在你的package.json里看到

此时你的navigation就不会出现未定义了；后面安装的axios vue-lazyload安装方法都是一样的；

在main.js里配置

import Navigation from 'vue-navigation'//导航

Vue.use(Navigation, {router})

三、路由

配置页面的时候一定要重定向 

不然会导致一开始进入页面是空白页面

三、组件引入

首先一定要在index.js里面引入组件

例如

接着就是实际页面的布局了，样式<style scoped></style>scoped只对当前页面样式产生影响

四、页面布局完成 主要重要的就是跟后台进行数据相互

vue.js数据相互很方便 这也是小生一用上他就爱不释手了 和小程序有异曲同工之处。

例如列表 平时我们用到最多的也就是列表了

（1）v-if    v-for  一定要熟练运用。在此也做知道v-show和v-if用法相同不同点在于v-show只是简单的改变display的属性。

 

v-for 用来循环数据的

v-for="item  in listData"   当然你也可以放参数(item,index)后面就是你要显示的那个数据了例如

以上是小生需要显示的东西。

以上你都弄好后，你需要定义和请求数据 在data里定义 listData:[],不然后报错

与后台交互 建议用axios 安装方法上面已讲  不在重复；

listData 还是dateList 或者其他 看你自己怎么定义的 v-for=‘item in listData’还是其他

以上中我用到了一个加载数据在加载中的 加载插件 你可以安装mint-ui  安装方法不再重复

好了 一个简单的页面你就完成了 

 

常用的轮播、小喇叭，等 ，自己可以引入

最后便是打包 同理 cnpm install -----------------cnpm run build     如果打包出现npm未更新等错误 cnpm i cnpm -g一定是全局更新

打包时需要注意修改

 

 

将  /  修改为 ./最后打包完成后 不然打包后index.html打包为空白！

你会在你的文件中看到

 

以上如遇问题  可以与小生一同讨论额! 

请多指教