从零开始，搭建Vue的Webpack项目以及初始化工作
介绍
以Vue移动端为例，搭建Vue的Webpack项目。
一，准备
-
安装Node.js
– (Node.js附带npm包管理工具)，在Node官网下载安装即可。
安装成功的标志
-
安装Vue cli脚手架工具
– 用途：用于搭建Vue的webpack项目
– 关于：Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。新版的脚手架有可以通过UI界面操作来创建管理Vue项目。
– 更多详情请自行查看Vue Cli官方文档
– 安装
//全局安装
npm install -g @vue/cli
//查看是否安装成功
vue --version
二，项目构建
以@Vue/cli 使用UI界面创建为例:
//打开ui操作界面
vue ui
这里包管理工具我选择，npm
这里我选择默认
三，项目配置
1,webpack打包的配置（开发/生产 环境）
- 开发环境打包
该Vue Cli 构建的webpack项目 默认使用serve进行开发环境的打包。
因此我们通过：
//终端输入
npm run serve
输入地址，查看是否打包成功
我们甚至可以设置 --open这个参数，以至于打包完成自动打开浏览器。
Usage: serve [options] [entry]
在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器
Options:
-o, --open 打开浏览器
-c, --copy 将本地 URL 复制到剪切板
-h, --help 输出用法信息
值得注意的是该插件还拥有热部署的功能，当我们修改项目种的文件并进行保存，就能实时的预览修改后的内容，而无需手动刷新浏览器，这样一来就能够大大方便开发者在开发过程中进行调试和预览。
- 生产环境打包
生产环境的打包使用的是build。
//终端输入
npm run build
打包完成之后，我们可以发现项目多了一个dist文件，这里的文件是存放在磁盘中的，区别：打包到生产环境的时候是存放到运行内存的。
注意：这是如果直接打开dist的index.html是看不到页面的。
这是我们得使用:
//终端输入
serve dist
此时就可以预览到打包到本地的页面了。
从下面介绍可以了解到，dist目录下的文件需要挂到服务器上进行预览。
感兴趣的小伙伴还可以试下通过：
//终端输入
//安装http-server
npm install http-serve -g
//运行
http-server dist
2,安装stylus
//终端输入
npm install stylus stylus-loader --save-dev
配置单文件组件vue的初始代码模板
这样创建vue文件的时候就无需手动去指定编写样式的的语法了。
3,文件结构
既然要打造文件结构，干脆把src下面的所有文件都删掉，重新构建的过程会让你更加深入这个文件结构。
图示
– 首先我们自己来写一下：main.js文件和 App.vue 这两个文件尤为重要因此单独进行阐述。
App.vue
//App.vue
<template>
<div id="app">
app
</div>
</template>
<script>
export default {
name: "App"
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>
main.js
Vue渲染模板方式一：
//main.js
/*
入口文件
*/
import Vue from 'vue'
import App from "@/App";
export default new Vue({
el:'#app',
components:{
App
},
template:'<APP/>'
})
在本次项目构建中，使用template属性来渲染App组件的方式将不被允许，报错信息：
还记得我们使用Vue Cli 构建项目的时候使用的UI管理界面吗？我们去那里看看是否有相关的配置设置。
启动UI服务
启用运行时编译即可解决上述问题
感兴趣的伙伴还可以继续尝试一下通过以下两种方式来解决，即使不启用运行时编译。
Vue渲染模板方式二：
/*
入口文件
*/
import Vue from 'vue'
import App from "@/App";
export default new Vue({
el:'#app',
render:function (createElement){
return createElement(App);
}
})
Vue渲染模板方式三：
/*
入口文件
*/
import Vue from 'vue'
import App from "@/App";
export default new Vue({
render:function (createElement){
return createElement(App);
}
}).$mount("#app");
以上三种方式，结合Vue生命周期图来看，你会豁然开朗。
4,iconfont阿里巴巴矢量图标库
链接：阿里巴巴矢量图标库
此处以font class 的方式来使用icofont
把相关文件放置在common/icon下
在main.js进行引入(则全局都可以使用了)
/*
入口文件
*/
import Vue from 'vue'
import App from "@/App";
import "./common/icon/iconfont.css" // <-此处引入
export default new Vue({
render:function (createElement){
return createElement(App);
}
}).$mount("#app");
如何使用在下载下来的文件中有相关演示，此处不再赘述。
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.ellipsis{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
在main.js进行引入
/*
入口文件
*/
import Vue from 'vue'
import App from "@/App";
import "./common/icon/iconfont.css"
import "./common/style/css/reset.css" // <-此处引入
export default new Vue({
render:function (createElement){
return createElement(App);
}
}).$mount("#app");
6,移动端ViewPort的配置，移动端点击事件300ms延迟的解决
安装
npm i fastclick
引入
/*
入口文件
*/
import Vue from 'vue'
import App from "@/App";
import "./common/icon/iconfont.css"
import "./common/style/css/reset.css"
import FastClick from 'fastclick' // <- 此处引入
FastClick.attach(document.body) // <- 此处引入
export default new Vue({
render:function (createElement){
return createElement(App);
}
}).$mount("#app");
7,路由(Vue-Router)
安装
npm install vue-router
使用
index.js
引入了已下两个组件页面
//index.js
import Vue from "vue"
import VueRouter from "vue-router";
import Home from "../pages/Home/Home"; //组件页面
import Other from "../pages/Other/Other"; //组件页面
Vue.use(VueRouter)
export default new VueRouter({
routes:[
{
path:'/',
component:Home
},
{
path:'/other',
component:Other
}
]
})
main.js
/*
入口文件
*/
import Vue from 'vue'
import App from "@/App";
import "./common/icon/iconfont.css"
import "./common/style/css/reset.css"
import router from "./router" // <- 此处引入
import FastClick from 'fastclick'
FastClick.attach(document.body)
export default new Vue({
render:function (createElement){
return createElement(App);
},
router:router //<-此处使用
}).$mount("#app");
App.vue
使用router-view，则根据地址栏的内容进行页面切换
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App"
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>
效果
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
