vue开发实战2——项目框架结构

[code]entry: {
app: './src/main.js'
}

是入口路径。而

[code]output:{...}

是出口。执行之后，会生成一个dist文件夹，刷新之后即可看见，将这个文件夹放置在服务器上即可。

[code]/*方式一*/
resolve:{
alias:{
'@':resolve(__dirname,'src')
}
}
/*方式二*/
resolve:{
alias:{
'src':path.resolve(__dirname,'../src'),
'components':path.resolve(__dirname,'../src/components'),
'api':path.resolve(__dirname,'../src/api'),
'utils':path.resolve(__dirname,'../src/utils'),
'store':path.resolve(__dirname,'../src/store'),
'router':path.resolve(__dirname,'../src/router')
}
}

使用：

[code]/*方式一*/
import hello from '@/components/hello'
/*方式二*/
import hello from 'components/hello'
import getAuth from 'api/auth'

config

其中index.js文件中的port:8080和

host: 'localhost'

1.必须使用驼峰法命名；

2.在一个函数当中，轻易不要使用全局变量，尽量使用let来定义，这个因为vue框架的原因；

3.在注释//后面一定要加一个空格，:后面也是;

4.代码段落对齐一定要仔细，否则也会报错；

5.定义工具函数时，内部的函数引用要this.function()；

6.==使用要换成===，但是要注意===是不能自动转换类型的。

npm run build后生成的dist文件访问本地static路径下的data.json数据有问题，需要修改productionSourceMap属性为false。

[code] module.exports = {
build:{
assetsSubDirectory: 'static',  //修改这里成你项目放置静态文件的目录
assetsPublicPath: './',     //修改这里成你项目放置静态文件的目录
productionSourceMap: false     //修改为false
}
}

[code]import VueResource from 'vue-resource'
Vue.use(VueResource);

主题、字体等静态资源，下级目录创建font和img（ps:https://tinypng.com/图片压缩地址）

入口文件、加载组件、初始化等。

[code]import Vue from 'vue';
import App from './App';
import router from './router';

Vue.config.productionTip = false;
//开启debug模式
Vue.config.debug = true

new Vue({
el: '#app',
router, // 创建和挂载根实例。记得要通过 router 配置参数注入路由
template: '<App/>',
components: { App },
});

filters