一步一步搭建vue項目

1 安裝步驟

1. 建立一個目錄，咱們這裏定義爲Vue
2. 在Vue目錄打開dos窗體，輸入以下命令：vue create myproject
3. 選擇自定義

　　　　 

　　4. 先選擇要安裝的項目，咱們這裏選擇4個

　　　　 

 　　5.選擇yes

　　　　 

　　6.選擇SCSS/SASS

 　　　　

 

　　7.選擇第一個

　　　　

 

　　 8.選擇第一個

 　　　　

 

　　9.選擇本身的配置文件

 　　　　

　　10.選擇no

 　　　　

 

　　11.等待下載完成

　　12.下載完成後，須要安裝一下相關插件，進入到「package.json」文件的同級目錄並打開dos窗體執行以下命令：npm install

　　13.安裝完成以後，一樣在「package.json」目錄執行如下命令啓動服務： npm run serve

　　14.啓動成功以後，能夠看到以下提示：

 　　　　

 

　　15.ok，如上提示，咱們在瀏覽器輸入：http://localhost:8080，出現以下頁面表示成功了。

 　　　　

 

 

2 改造項目

前端框架咱們使用vant，vant官網以下：https://youzan.github.io/vant/#/zh-CN/intro

2.1 安裝vant

命令：npm i vant -S

 

說明：

npm i module_name  -S  = >  npm install module_name --save    寫入到 dependencies 對象

npm i module_name  -D  => npm install module_name --save-dev   寫入到 devDependencies 對象

npm i module_name  -g  全局安裝

  i 是install 的簡寫

 

2.2 安裝 babel-plugin-import

命令：npm i babel-plugin-import -D

 

2.3 項目結構介紹

 

2.3.1 package.json

package.json存放的是項目所須要的包，以及項目的一些配置，重點說一下dependencies是存放的程序發佈時所依賴的包，devDependencies存放的是開發階段所須要的包。每一個包都有一個版本號，具體安裝卸載可參考npm安裝卸載包。

2.3.2 babel.config.js

babel.config.js存放的是項目所須要的插件，好比咱們要引入vant插件，那麼須要配置以下：

 

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

 

 

 

 

主要是plugins裏面的內容。

 

2.3.3 src/router.js

這個文件是路由文件，存放的路由信息，指定url過來的路由轉發到哪一個組件上面，以下：

 

import Vue from 'vue'
import Router from 'vue-router'

import Home from './views/Home'
import Cart from './views/Cart'
import Category from './views/Category'
import PersonalCenter from './views/PersonalCenter'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [{
    path:'/',
    redirect:'/home'
  },{
    path:'/home',
    name:'home',
    component:Home
  },{
    path:'/cart',
    name:'cart',
    component:Cart
  },{
    path:'/category',
    name:'category',
    component:Category
  },{
    path:'/personalCenter',
    name:'personalCenter',
    component:PersonalCenter
  }]
})

 

 

 

 

 

2.3.4 src/main.js

全局的一些引用，好比註冊全局組件。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import TabBar from './components/TabBar' 

Vue.config.productionTip = false
Vue.component("tab-bar",TabBar); //註冊全局組件 

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

 

2.3.5 src/App.vue

這是主頁面的組件，全部的主頁佈局在這裏實現。

<template>
  <div id="app">
    <tab-bar></tab-bar>
    <router-view/>
  </div>
</template>

<style lang="scss">

</style>

 

咱們能夠看到，主頁就一個tab-bar和router-view，經過tab-bar就能夠將路由映射到router-view裏面去。實現單頁面應用。

3 npm安裝卸載包

3.1 簡單安裝

npm i webpack -S ，這個命令就是把webpack安裝到項目局部，同時指定參數-S表示安裝到dependencies節點，若是將-S修改成-D，那麼就安裝到devDependencies節點。

 

3.2 全局安裝

npm i webpack -S -g，這裏的-g就表示全局安裝，安裝以後咱們能夠經過命令npm root -g查看全局安裝所在路徑。

 

3.3 卸載安裝包

npm uninstall webpack，卸載webpack模塊

npm uninstall webpack -g，卸載全局的webpack模塊

 

3 發佈

上面步驟完成以後總須要發佈的，由於.vue這種格式瀏覽器是沒法解析的，發佈就是把這些相似於.vue的文件發佈爲瀏覽器能解析的js文件等。

發佈命令：npm run build

注意查看日誌報錯，依次解決就好，好比console.log這種就要刪除才行。