1?安裝步驟
- 創建一個目錄，我們這里定義為Vue
- 在Vue目錄打開dos窗體，輸入如下命令：vue create myproject
- 選擇自定義
?
4.?先選擇要安裝的項目，我們這里選擇4個
?
vue項目部署到服務器。? 5.選擇yes
?
6.選擇SCSS/SASS
? 
前端vue一般用來做什么項目？?
7.選擇第一個
?
nginx部署vue項目。 ?8.選擇第一個
? 
?
9.選擇自己的配置文件
vue環境搭建的幾種方法？? 
10.選擇no
? 
?
搭建一個vue框架的準備過程？ 11.等待下載完成
12.下載完成后，需要安裝一下相關插件，進入到“package.json”文件的同級目錄并打開dos窗體執行如下命令：npm install
13.安裝完成之后，同樣在“package.json”目錄執行以下命令啟動服務： npm run serve
14.啟動成功之后，可以看到如下提示：
nodejs vue？? 
?
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這種就要刪除才行。
?
