AspnetMvc前后端分离项⽬⼿记（四）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，配置⽂件
、
这个也是
⽐较重要的是config/index.js⽂件
var path = require('path')
build: { // production 环境
env: require('./v'), // 使⽤ v.js 中定义的编译环境 index: solve(__dirname, '../dist/index.html'), // 编译输⼊的 index.html ⽂件
assetsRoot: solve(__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('./v'), // 使⽤ v.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
// (github/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
}
}
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 回车即可
三安装iview，
也是project1⽬录下，运⾏ npm install iview --save
装好之后基本上依赖项和环境就Ok，然后就开⼲了
先了解⼀下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后⾯是⽂件夹的路径vi40精英版
云南中医学院教务管理系统
，下⾯的path是在浏览器中访问的地址
再次访问，已经有了
，写不动了，今天先写这么多，下⼀节写路由的使⽤
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议