vue console
目标:快速初始化一个vue工程
目录结构
│ .gitignore # 忽略文件,比如 node_modules │ package.json # 项目配置 │ README.md # 项目说明 │ index.html # 首页 │ ├─console.base.config.js # 基础 ├─console.dev.config.js # 开发 ├─console.build.config.js # 编译 │ ├─node_modules │ ├─dist # 打包完的文件会自动放在这里 │ └─src ├─ main.js # 启动配置 │ ├─ router.js # 路由配置 │ ├─components # 组件 │ │ │ └─ app.vue # 入口组件,内含路由和公共部分 │ ├─views # 视图(即路由) │ ├─directives # 自定义指令 │ ├─filters # 自定义过滤器 │ ├─config # 放置一些配置文件 │ ├─libs # 放置一些工具函数 │ ├─images # 放置图片 │ ├─styles # 放置css │ │ │ ├─ common.css # 通用css │ │ │ └─ reset.css # 页面初始化css │ ├─fonts # 放置iconfont字体 │ └─template # html模板 │ └─ index.ejs # 默认的html模板
说明
将css(使用@import的和.vue内style的)样式都独立抽离为main.css文件,如果想按需加载,可以将webpack.base.js内的如下代码注释
vue: loaders: css: ExtractTextPlugin "[name].css" allChunks : trueresolve : 'modules'
如何使用
说明
html模板文件在src/template/index.ejs内。
安装
// 安装前请先确保已安装node和yarn
yarn的安装方法:
Windows:
需要下载msi文件 ,下载地址:https://yarnpkg.com/latest.msi
macOS:
curl -o- -L https://yarnpkg.com/install.sh | bash
Linux:
sudo apt-key adv --keyserver pgp.mit.edu --recv D101F7899D41F3C3 echo "deb http://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn
// 需要提前在全局安装webpack和webpack-dev-server,如果已安装请忽略
yarn add global webpack
yarn add global webpack-dev-server
// 安装成功后,再安装依赖
yarn install
运行
开发环境
// 注意首次使用需要执行下面的init命令来生成入口html文件,以后不用再执行
yarn run init
yarn dev
生产环境(打包)
yarn build
访问
在浏览器地址栏输入http://127.0.0.1:8080