从零开始建站(三) - 前端项目搭建

简介：

前端选用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模式下，只是动态的通