Aspnet Mvc 前后端分离项目手记（四）vue项目的搭建（一）(iview)
一项目创建
1，搭建vue-cli脚手架（依赖npm）
没有安装npm的同学，请先使用npm install -g vue-cli ，然后再进行这一步
安装的过程中有几项
? project name p1 //项目名
? project description 1 //描述
? author jimsfriend //作者
? vue build standalone
? install vue-router? yes //是否使用路由（请选择yes）
? use eslint to lint your code? no //这里是是否使用严格模式，一定要选否，不要问我为什么，严格模式很痛苦！
? set up unit tests no //这里随便
? setup e2e tests with nightwatch? no //这里随便
然后就是下载依赖包，得等会儿
二 项目结构
1，build:webpack配置文件，可以不用动
2，config,配置文件
dev.env.js看名字叫生产环境.js，没啥重要的用途，可以不用关注
、
这个也是
比较重要的是config/index.js文件
var path = 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
// gzip off by default as many popular static hosts such as
// surge or netlify already gzip all static assets for you.
// before setting to `true`, make sure to:
// npm install --save-dev compression-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 代理的接口（可跨域）
// css sourcemaps off by default because relative paths are "buggy"
// with this option, according to the css-loader readme
// (https://github.com/webpack/css-loader#sourcemaps)
// in our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
csssourcemap: false // 是否开启 csssourcemap
}
}
这段代码是抄了园友，更加详细的原文地址 https://www.cnblogs.com/whkl-m/p/6627864.html
3，dist： 编译后的打包文件默认是没有的，
项目编译打包：
cmd 到project1目录，运行：npm run build ，然后对多出来一个dist文件，这个dist文件就是编译后的项目，发布的时候只需把dist放在 web宿主 （如 iis）上即可
4，mode_modules，node模块，就是一些依赖包，
5 ，src，主要编写代码文件，后面会单独介绍
6，static，也是静态文件存放文件
7，剩下的都是写不怎么重要的，省略了。
二 项目运行,进入project1 目录 在cmd中运行 npm run dev 回车即可
然后就运行起来,访问 http://localhost:8080/
三 安装iview，
也是project1目录下，运行 npm install iview --save
装好之后基本上依赖项和环境就ok，然后就开干了
iview的文档地址 http://v1.iviewui.com/docs/guide/install，一定要注意版本，不同的版本api不同
先了解一下src的项目结构
assets，放一些静态文件，比如图片图标啥的
components ， 存放组件 ，理解为抽取出来的一些公共的自定义组件
js，这个是我自己新建的文件夹放一些公共的js文件比如 用axios粉装的http请求 ， 常用的工具类等等
router ，里面有一个index.js 文件，是路由文件 。就像aspnet mvc 中的路由表，只不过他是显式的定义出来，而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是在浏览器中访问的地址
再次访问，已经有了
，写不动了，今天先写这么多，下一节写路由的使用