一项目创建

 

　　1，搭建vue-cli脚手架（依赖npm）

 

　　没有安装npm的同学，请先使用npminstall-gvue-cli，然后再进行这一步

 

　　安装的过程中有几项

 

　　?Projectnamep1//项目名

 

　　?Projectdescription1//描述

 

　　?Authorjimsfriend//作者

 

　　?Vuebuildstandalone

 

　　?Installvue-router?Yes//是否使用路由（请选择Yes）

 

　　?UseESLinttolintyourcode?No//这里是是否使用严格模式，一定要选否，不要问我为什么，严格模式很痛苦！

 

　　?SetupunittestsNo//这里随便

 

　　?Setupe2etestswithNightwatch?No//这里随便

 

　　然后就是下载依赖包，得等会儿

 

　　二项目结构

 

　　1，build:webpack配置文件，可以不用动

 

　　2，config,配置文件

 

　　dev.env.js看名字叫生产环境.js，没啥重要的用途，可以不用关注

 

　　、

 

　　这个也是

 

　　比较重要的是config/index.js文件

 

　　varpath=require('path')

 

　　module.exports={

 

　　build:{//production环境

 

　　env:require('./prod.env'),//使用config/prod.env.js中定义的编译环境

 

　　index:path.resolve(__dirname,'../dist/index.html'),//编译输入的index.html文件

 

　　assetsRoot:path.resolve(__dirname,'../dist'),//编译输出的静态资源路径

 

　　assetsSubDirectory:'static',//编译输出的二级目录

 

　　assetsPublicPath:'/',//编译发布的根目录，可配置为资源服务器域名或CDN域名

 

　　productionSourceMap:true,//是否开启cssSourceMap

 

　　//Gzipoffbydefaultasmanypopularstatichostssuchas

 

　　//SurgeorNetlifyalreadygzipallstaticassetsforyou.

 

　　//Beforesettingto`true`,makesureto:

 

　　//npminstall--save-devcompression-webpack-plugin

 

　　productionGzip:false,//是否开启gzip

 

　　productionGzipExtensions:['js','css']//需要使用gzip压缩的文件扩展名

 

　　},

 

　　dev:{//dev环境

 

　　env:require('./dev.env'),//使用config/dev.env.js中定义的编译环境

 

　　port:8080,//运行测试页面的端口

 

　　assetsSubDirectory:'static',//编译输出的二级目录

 

　　assetsPublicPath:'/',//编译发布的根目录，可配置为资源服务器域名或CDN域名

 

　　proxyTable:{},//需要proxyTable代理的接口（可跨域）

 

　　//CSSSourcemapsoffbydefaultbecauserelativepathsare"buggy"

 

　　//withthisoption,accordingtotheCSS-LoaderREADME

 

　　//(https://github.com/webpack/css-loader#sourcemaps)

 

　　//Inourexperience,theygenerallyworkasexpected,

 

　　//justbeawareofthisissuewhenenablingthisoption.

 

　　cssSourceMap:false//是否开启cssSourceMap

 

　　}

 

　　}

 

　　这段代码是抄了园友，更加详细的原文地址https://www.cnblogs.com/whkl-m/p/6627864.html

 

　　3，dist：编译后的打包文件默认是没有的，

 

　　项目编译打包：

 

　　cmd到project1目录，运行：npmrunbuild，然后对多出来一个dist文件，这个dist文件就是编译后的项目，发布的时候只需把dist放在web宿主（如IIS）上即可

 

　　4，mode_modules，node模块，就是一些依赖包，

 

　　5，src，主要编写代码文件，后面会单独介绍

 

　　6，static，也是静态文件存放文件

 

　　7，剩下的都是写不怎么重要的，省略了。

 

　　二项目运行,进入project1目录在cmd中运行npmrundev回车即可

 

　　然后就运行起来,访问http://localhost:8080/

 

　　三安装iview，

 

　　也是project1目录下，运行npminstalliview--save

 

　　装好之后基本上依赖项和环境就Ok，然后就开干了

 

　　Iview的文档地址http://v1.iviewui.com/docs/guide/install，一定要注意版本，不同的版本api不同

 

　　先了解一下src的项目结构

 

　　assets，放一些静态文件，比如图片图标啥的

 

　　components，存放组件，理解为抽取出来的一些公共的自定义组件

 

　　js，这个是我自己新建的文件夹放一些公共的js文件比如用axios粉装的Http请求，常用的工具类等等

 

　　router，里面有一个index.js文件，是路由文件。就像ASPNETMVC中的路由表，只不过他是显式的定义出来，而mvc中默认使用ctroller前缀和action名作为路由。

 

　　views文件夹，放主要的页面，代码量最多的地方

 

　　App.vue,入口的组件

 

　　main.js入口文件

 

　　清楚之后，我们来写一个登录页

 

　　先搞一个_layout文件放布局页，是不是和mvc里面的_layout很像？没错他们都是一个意思

 

　　这里的<router-view></router-view>和mvc中的RendBody()是一个意思

 

　　然后搞account文件夹，来放登陆注册这种页面，搞一个login.vue文件，就是登录页了

 

　　搞完之后就去访问/account/login,你会发现啥都没有，因为还没有再router/index.js里面定义

 

　　,定义一个account_login，名字随便起from后面是文件夹的路径

 

　　，下面的path是在浏览器中访问的地址

 

　　再次访问，已经有了

 

　　，写不动了，今天先写这么多，下一节写路由的使用