Vue项目硅谷外卖（一）项目准备

本项目选自尚硅谷Vue实战教程，基于vue-cli2完成。

一、项目准备

1.创建vue-cli

进入到自己要安装项目的文件夹目录，我这里是 “D:\webpackProject\vue-cli2> ” 执行 “vue init webpack vue-cli2-project ” 命令，出现如下图提示 ，“vue-cli2-project” 是我们的项目文件夹的名字，就是最终显示在index.html中的title标签里和package.json中的，也可以自己进行修改，我们一般不会去改，直接按回车键进行下一步。

“? Project description (A Vue.js project)”  是项目的描述，自己可以修改或者使用默认的，我们一般使用默认的直接按回车键进行下一步，

　　　　

        这里是作者的信息，我们使用默认的，直接下一步，

     　　

 　　　这里有两个选项：Runtime +  Compiler 和Runtime-only ，Runtime-only要比Runtime +  Compiler 轻大约6KB,而且效率要高， 按上下键可以进行选择，默认是第一个，选择好后按回车键进行下一步，　

　　　　

            这一步是询问是否使用vue-router（路由），因为在项目中我们会用到所以这里按Y 键，进行下一步，

       　　

              这一步是询问是否使用ESLint（语法检查器），ES (ecscript) 即 javascript ,lint 限制的意思，也就是 javascript语法限制器，使得你的语法更加规范，如果你的语法不规范编辑器就会报错，你可能在开发过程中因为一个空格导致语法不规范进而报错（其实你的代码没有问题的），所以对于初学者不建议使用此语法，所以我们选择 n，并进行下一步操作，

　　　　

    　　　　 这一步是询问是否使用单元测试，这个用的人比较少，所以我们不适用，输入n并进行一下步，

                   

               这一步询问是否要进行e2e(端到端测试)，是一个自动化测试的框架，这里我们就不使用了，直接输入n，进行下一步:

　　　　

　　　　这里询问我们管理项目是用npm 还是yarn ，这里我们使用npm ,直接回车，接下来就是等待安装node_modules。下图表示安装完成：

　　　　

　　　　执行 cd vue-cli2-project 进入到我们的项目目录下，然后执行 npm run dev 命令进行启动我们的项目，下图是我们的项目目录：

　　　　

 

项目目录介绍：

　　　　　1、build  文件夹：webpack的一些相关配置；

　　　　　2、config  文件夹：项目开发环境和生产环境的一些相关配置；

　　　　　3、node_modules  文件夹 ：这里存放的是安装包，比如webpack、第三方插件库、项目的依赖文件；

　　　　　4、src  文件夹：我们将要写的代码放在这里面，打包上线时会进行编译、压缩等操作。

　　　　　5、static 文件夹：这里存放的是一些静态文件比如图片、css文件、不需要进行压缩的js文件，打包时这个文件夹将原封不动的放到dist（打包时自动生产的文件夹）文件夹下面。

　　　　　6、.babelrc 文件：ES6语法编译配置，主要是将ES 转成ES 需要适配那些浏览器

　　　　　7、.editorconfig 文件：定义代码格式，对代码的风格进行一个统一。

　　　　    8、.gitignore 文件：git上传需要忽略的文件格式

　　　　　9、  .postcssrc.js 文件：postcss配置文件

                 10、 index.html  文件：要进行访问的首页面

                 11、package-lock.json 文件：锁定依赖模块和子模块的版本号

                 12、package.json 文件：项目基本信息,包依赖信息等

                 13、README.md  文件：项目说明文件

2.安装CSS编译器

这里选择的是less

 使用命令安装less-loader和less:

npm install --save-dev less-loader@4.1.0 less@3.9.0

 安装成功

 配置

在build>webpack.base.conf.js中的module模块配置

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //配置路由产生两个结果：1.多了几个组件标签 如<router-view>2.多了两个属性可以访问（$route  $router）
  router,
  components: { App },
  render: h => h(App),
  /*
  创建一个vue对象，然后挂载到制定的页面节点。
  Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。
  * render是一个方法，自带一个形参createElement(h)，这个参数也是一个方法，是用来创建vue 节点的，也就是html模板的，然后渲染(render)到指定的节点上*/
  // template: '<App/>'
}).$mount('#app')

 3.main.js引入所需

 4.思考整体项目

哪些页面属于路由组件，哪些页面属于非路由组件。将每个组件设置文件夹形式管理，因为该组件可能还需要其他如图片等资源。

 5.配置路由

//路由器对象模块：该文件专门用于创建整个应用的路由器
import Vue from 'vue'
import VueRouter from 'vue-router'
//引入路由组件
import MSite from "../pages/MSite/MSite";
import Order from "../pages/Order/Order";
import Profile from "../pages/Profile/Profile";
import Search from "../pages/Search/Search";
//声明使用插件
Vue.use(VueRouter)

export default new VueRouter({
  //所有路由
  routes: [
    {
      path: '/msite',
      name: 'HelloWorld',
      component: MSite
    },
    {
      path: '/order',
      name: 'order',
      component: Order
    },
    {
      path: '/profile',
      name: 'profile',
      component: Profile
    },
    {
      path: '/search',
      name: 'search',
      component: Search
    },
    {
      path: '/',
      redirect: '/msite'/*重定向 路径是/ 但是会自动跑到/msite路径下  展示的msite中的内容*/
    }
  ]
})