Vue-cli脚手架搭建项目

创建一个简单的 vue-cli 脚手架项目

创建 vue-cli 脚手架项目

安装vue-cli ：npm install vue-cli -g
使用vue初始化基于webpack的新项目：vue init webpack projectName
进入项目目录安装依赖：npm install
package.json定义了这个项目所需要的各种模块，以及项目的配置信息，每个项目的根目录下都有，npm install命令会根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。（如果需要手动创建，可使用npm init --yes安装一个默认的package.json）
项目运行起来npm run dev
项目正常启动后，可继续安装vue的辅助工具
安装项目运行所依赖的模块（dependencies 模块）时：npm install xxx —save或npm install xxx -S
安装项目开发所需要的模块（devDependencies模块），如，linter, 测试库等：npm install xxx —save-dev或npm install xxx -D
如安装路由：npm install vue-router --save
打包的命令npm run build，打包完成后目录下会多一个dist的文件夹

调整 src 文件目录结构

在开发路径src下增加modules和pages文件夹，分别存放模块和页面有关页面的所有文件都放到同一文件夹下就近管理：

modules （通用 js 和通用 css 文件）
pages（放页面相关文件）
main.js（页面入口文件）
App.vue（页面使用的组件）
components（放公用组件）
router（页面的路由配置）
assets（页面的静态资源）

配置 webpack 文件

脚手架项目中运行npm run build即可自动进行打包

设置项目小图标ico

build/webpack.dev.conf.js 文件中添加：

new HtmlWebpackPlugin({
	filename: 'index.html',
	template: 'index.html',
	inject: true,
	favicon: './static/favicon.ico'   //添加这行
})

index.html 中添加：

1	<link rel="shortcut icon" href="static/favicon.ico" type="image/x-icon"/>

重启后项目的小图标已经设置完成:

1	npm run dev

自定义字体设置

字体放到项目目录中，如字体名为： animal.ttf
建一个 css 文件，引入字体并设置字体名：

@font-face {
	font-family: animal;
	src: url("./animal.ttf");    
}

项目中引入 css 文件：

// css 样式中引入方式
@import "./animal-font.css";

// js 样式中引入方式
import "./animal-font.css";

从小程序分享的 H5(vue-cli) 页面时ios系统正常，android分享时地址出错

具体如下：
ios系统的分享后解析的地址：
https://miniapi.yourgenex.com/h5/#/activity/eat-animal/home?token=eyJ0eXAiOiJKV1QiLCJhbGciOi
android 系统分享后解析的地址：
https://miniapi.yourgenex.com/h5?token=eyJ0eXAiOiJKV1QiLCJhbGciOi/#/activity/eat-animal/home

解决：去除 vue 的路由地址的 # 号分隔

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

css中使用相对路径引入字体和图片后打包出错的问题解决

解决：build文件夹 - utils.js文件中添加一行代码：

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../'            // 添加这行
  })s
} else {
  return ['vue-style-loader'].concat(loaders)
}
// URL 以"~ "、"@"开头，"~ " 、"@"后的任何内容都会作为一个模块请求被解析，如：
// url('~assets/font/wanwan.woff')
// ps： @ 是在 webpack 设置的 alias