1.全局安裝vue

?

?

新建文件夾
全局安裝 vue-cli
npm install --global vue-cli
在這個文件夾基礎上就可以創建vue項目了、
之后再想創建vue項目就直接在這個文件夾進行下面的步驟。 創建一個基于 webpack 模板的新項目 vue init webpack my-project 安裝依賴，走你 cd my-project npm install npm run dev

?

3.搭建目錄環境

1.src文件下基本幾個目錄：

1.1 components(組件文件)。

1.2 views（頁面文件）。

1.3 router（路由文件）。

1.4 js（js文件（main.js）(fontSize.js)等等）；

1.5 store（vuex文件）

1.6 css（文件）。

1.7 scss（文件）。

1.8 image（文件）。

?

3.1.index.html頁面需要一個掛載元素。

同時可以引入css文件或者js文件。

<div id="App"></div>

3.2.main.js（接口）

主要的作用就是引入外部文件以及創建vue實例化。(除了views文件中的頁面不需要在main中引入，他們是在路由中引入的。)

"./"表示當前路徑。“../”表示上一層。
import Vue from 'vue'；//引入vue.js import "../css/index.css";//也可以這樣寫import css from "../css/index.css" //引入外部文件 import router from "../router/router.js"//引入router路由 import Vuex from "../store/index.js"//引入Vuex。
import App from "../components/App.vue"
import store from "../store/index.js" //vuex

new Vue({
　　el:"App", //掛載元素
　　template:<App/>, //模板<App></App>
　　components:{App} //組件App
　　router, //注冊路由
　　store //注冊vuex。
})

?

3.3. components（文件）

創建App.vue（最大的組件）。

引入注意三個地方，1.標簽要寫對，2.想引入什么就import，3.引入之后記得注冊，components。4使用了路由的話，就應該在模板標簽寫<router-view></router-view>

<template><div id="App"> 　　　　　　<headerbao></headerbao>//(重點) 　　　　　　<router-view> //（重點）
　　　　　　　　//直接默認為首頁。看你路由的路徑配置。
　　　　　　</router-view>
　　　　　　
　　　　　</div>
</template><script>
import headerbao from "../components/header.vue" //引入頭部組件。（重點）
export defalut{ //引入(重點)name:"App",
　　　 components:{ //注冊組件
　　　　　　headerbao,
　　　}　　　　data:function(){return{abc:123}},methods:{//to do someting} }</script> <style lang="scss"></style>

其他組件同上即可。

3.4.views（文件）；

這里面等于頁面文件，等于都會放進路由里面。

1.例如index.vue(首頁)

<template><div id="index"><headerbao></headerbao> //引入到標簽</div></template><script>import headerbao from "../components/header.vue" //引入頭部組件 export defalut{name:"index",data:function(){return{//} },components:{ //注冊組件 headerbao ,}}</script> <style lang="scss"></style>

3.5.路由

1.打開my_project文件，cmd

npm install vue-router

2.成功以后，就創建目錄（第一步有說基本目錄）router/router.js

3.在main.js中

import router from "../router/router.js"new Vue({el:"#App",router, //記得注冊路由 .... })

4.打開router.js文件，記得一定要引入vue和路由庫。

?

import Vue from "vue";?//一定要引入vue
improt router from "vue-router"; //一定要引入路由庫 import Index from "../views/index.vue"; import Newsfrom "../views/news.vue";
import LinesRouters from "./LinesRouter.js"//線路頁面路由
import MyRouters from "./CenterRouter.js"//我的頁面路由
import MyOrderRouters from "./MyOrderRouter.js"//我的訂單頁面路由 Vue.use(router) //使用路由

const routeHome = [
　　{
　　　　path:'/', //當前路徑(是給默認首頁的路徑index.vue文件)
　　　　component:login, //組件對應view的index.vue
　　　　name:"login" //給個對應的名字比較好，不給也可以。
　　},
　　{
　　　　path:'/Home/Index',
　　　　component:Index,
　　　　name:"Index"
　　},
]

var routes = routeHome.concat(LinesRouters,MyRouters,MyOrderRouters);
var route = new router({
// mode: 'history',
routes, //配置路由,

});

//判斷登陸狀態

route.beforeEach((to, from, next) => {
　　//to:前往路徑
　　//from:前路徑
　　getJSON("Manage/FlowManage/NoHandNotice/IsLogin",{},function(res){
　　　　if(res.data.message=='1'){ //登陸狀態
　　　　if(to.name=="login"){ //如果是登錄頁
　　　　route.push({name: 'Index',path:'Home/Index'});//跳轉首頁
　　　　}
　　}else{ //未登錄狀態
　　　　route.push({name: 'login',path:'/'});//跳轉登錄頁
　　}
　　},function(err){
　　　　console.log(err)
　　})
　　next();
})
export default route;

3.6.css文件

1.可以直接引入到index.html

首先創建好scss文件目錄，然后開啟編譯，scss --watch scss：css ? ?然后再創建一個公共的common.scss，方便我調用方法。

（這樣子做雖然方便，但是千萬要注意命名沖突問題。畢竟一個頁面可能會有很多組件。）

2.可以直接在組件下寫。

3.暫時不明白為什么scss不能多人svn項目，運行項目會報錯。

3.7 打包build

1.路徑問題：進入config/index.js： module.exports={build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: '/', /* 將此處修改成 ./*/} } 2.仍然出現空白問題：進入router/index.js: var route = new router({//mode: 'history',//將history模式注釋即可routes, //配置路由, })

?3.8關于將vue的項目代碼放到svn或者git時node_modules的處理方式

　　　　1.盡量不要將node_modules放進svn或者git中，因為拉去時間長，而且用處不大，因為我們再生成node_modules時，或者安裝插件時，都會在webpack.json文件中生成。

　　　　2.所以我們只要將webpack.json文件放進svn(git)中就行。

　　　　3.我們在拉取代碼時，再在本地中下載node_modules,它會根據webpack.json的內容生成相應的模塊。所以不必擔心，之前其他同事安裝的內容消失掉。

轉載于:https://www.cnblogs.com/MJ-MY/p/8045067.html

總結

以上是生活随笔為你收集整理的VUE搭建开发，以及打包。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。