简介:
前端选用VUE是因为它比较简单,容易上手,对于不熟悉前端的小伙伴很适合。对于软件发展来说,后端技术已趋于成熟和稳定,在功能已稳定的情况下,客户会把要求更多的放在页面的美观和合理排版布局上,学习一下前端,特别是自己设计一个页面,有助于对前端的了解和对美观设计的培养。
一、搭建VUE项目
1.搭建VUE基础框架
1.1 安装node.js
安装过程中记得勾选Add to path,安装完成后再cmd命令行输入:node -v 和 npm -v 如果分别显示版本号则安装成功。
1.2 安装vue脚手架vue-cli
输入以下命令:npm install -g vue-cli (其中-g表示全局安装)
1.3 初始化一个项目
在cmd命令行进入要安装项目的文件夹,输入以下命令:vue init webpack projectName (其中projectName填写你的项目名称)比如下图,进入Project文件夹,按着问号?后的提示操作,没有用红字写备注的都是默认或者选NO的,最后提示 Project initialization finished 代表成功。
然后我们可以看到在d:project下生成的项目文件夹:
1.4 安装依赖组件
通常我们安装组件方法是先进入项目目录下(比如这里是命令行进入yytf文件夹):输入命令: npm install xxx (比如安装jquery:xxx就填jquery),但我们这里尽量不要通过这种方式安装,还是那个问题,为了减小webpack打包后vendor.js的大小,我们通过cdn方式引入,比如index.html中引入 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
1.5 启动服务
通过命令: npm run dev 如果没有报错,就可以通过提示的链接在浏览器登录看到“Welcome to Your Vue.js App”表示登录成功
2.路由模块
2.1 index.html
引入:<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
2.2 webpack.base.conf.js
在module.exports = {}中最后加上
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'axios': 'axios',
'vue-resource': 'VueResource'
}
2.3 routes.js
两种引入方式:
//>普通路由引入方式(所有的vue模块的js文件都打包进vendor.js和app.js中)
import Articles from './components/Articles'
import Topics from './components/Topics'
import AboutMe from './components/AboutMe'
import TimeLine from './components/TimeLine'
import Pictures from './components/Pictures'
//>按需加载路由引入方式(各个vue模块的js文件分别打包进0.xxx.js、1.xxx.js、2.xxx.....)
const Articles = r => require.ensure([], () => r(require('./components/Articles')));
const Topics = r => require.ensure([], () => r(require('./components/Topics')));
const AboutMe = r => require.ensure([], () => r(require('./components/AboutMe')));
const TimeLine = r => require.ensure([], () => r(require('./components/TimeLine')));
const Pictures = r => require.ensure([], () => r(require('./components/Pictures')));
//构建vue-router实例(这里的VueRouter要和2.2中的名字对应):
export default new VueRouter({
mode:"history",
routes: [
{path: '/',name: 'Articles',component: Articles},
{path: '/topics',name: 'Topics',component: Topics},
{path: '/aboutMe',name: 'AboutMe',component: AboutMe},
{path: '/timeLine',name: 'TimeLine',component: TimeLine},
{path: '/pictures',name: 'Pictures',component: Pictures}
]
})
这里有个坑,如果我们不加mode:"history",那么浏览器的路径会出现#不美观,如果我们加上mode:"history"后,在本地环境下一切都是正常的,但部署到服务器的nginx上跳转后如果刷新页面就会出现404了,这是因为那是因为在history模式下,只是动态的通