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

简介：

前端选用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模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我直接在浏览器里输入这个地址的时候，就一定要对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404而本地开发时用的服务器为node，Dev环境中自然已配置好了。所以要在nginx.conf里面做一些配置：

location / {
　　root   html;
　　index  index.html;
    if (!-e $request_filename){
        rewrite ^/(.*) /index.html last;
        break;
　　}
}

2.4 使用路由

2.4.1在main.js中引入之前的routes.js（./routes这个相对路径视情况而定）：import router from './routes'

2.4.2在main.js中把路由挂载到vue实例上（注意vue对象中左边的router不能随便更换名称）：