資訊專欄INFORMATION COLUMN
摘要：樣式通過標簽包裹，默認是影響全局的，如需定義作用域只在該組件下起作用，需在標簽上加，如要引入外部文件，首先需給項目安裝依賴包，打開，進入項目目錄，輸入回車。
首先需要安裝node環境，可以直接到中文官網http://nodejs.cn/下載安裝包。
只是這樣安裝的 node 是固定版本的，如果需要多版本的 node，可以使用 nvm 安裝http://blog.csdn.net/s8460049...
安裝完成后，可以命令行工具中輸入 node -v 和 npm -v，如果能顯示出版本號，就說明安裝成功。
安裝好了 node，我們可以直接全局安裝 vue-cli：
npm install -g vue-cli
但是這種安裝方式比較慢，推薦使用國內鏡像來安裝，所以我們先設置 cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org
如果安裝失敗，可以使用 npm cache clean 清理緩存，然后再重新安裝。后面的安裝過程中，如有安裝失敗的情況，也需要先清理緩存
同樣可以使用 cnpm -v 查看是否安裝成功
然后使用 cnpm 安裝 vue-cli 和 webpack
cnpm install -g vue-cli
最新的 vue 項目模板中，都帶有 webpack 插件，所以這里可以不安裝 webpack
安裝完成后，可以使用 vue -V （注意 V 大寫）查看是否安裝成功。
如果提示“無法識別 "vue" ” ，有可能是 npm 版本過低，可以使用 npm install -g npm 來更新版本
首先需要在命令行中進入到項目目錄，然后輸入：
vue init webpack Vue-Project
其中 webpack 是模板名稱，可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-temp...
Vue-Project 是自定義的項目名稱，命令執行之后，會在當前目錄生成一個以該名稱命名的項目文件夾
配置完成后，可以看到目錄下多出了一個項目文件夾，里面就是 vue-cli 創建的一個基于 webpack 的 vue.js 項目
然后進入項目目錄（cd Vue-Project），使用 cnpm 安裝依賴
cnpm install
然后啟動項目
npm run dev
如果瀏覽器打開之后，沒有加載出頁面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config>index.js
建議將端口號改為不常用的端口。另外我還將 build 的路徑前綴修改為 " ./ "（原本為 " / "），是因為打包之后，外部引入 js 和 css 文件時，如果路徑以 " / " 開頭，在本地是無法找到對應文件的（服務器上沒問題）。所以如果需要在本地打開打包后的文件，就得修改文件路徑。
自己的項目文件都需要放到 src 文件夾下
項目開發完成之后，可以輸入 npm run build 來進行打包工作
npm run build
打包完成后，會生成 dist 文件夾，如果已經修改了文件路徑，可以直接打開本地文件查看
項目上線時，只需要將 dist 文件夾放到服務器就行了。
index.html如其他html一樣，但一般只定義一個空的根節點，在main.js里面定義的實例將掛載在根節點下，內容都通過vue組件來填充
main.js主要是引入vue框架，根組件及路由設置，并且定義vue實例，下圖中的
1>router就是設置路由器
2>template:"
3>components:{App}就是引入的根組件App.vue
后期還可以引入插件，當然首先得安裝插件。
一個vue頁面通常由三部分組成:模板(template)、js(script)、樣式(style)
【template】
其中模板只能包含一個父節點，也就是說頂層的div只能有一個（例如下圖，父節點為#app的div，其沒有兄弟節點）
打一個比喻吧,
【script】
vue通常用es6來寫，用export default導出，其下面可以包含數據data，生命周期(mounted等)，方法(methods)等，具體語法請看vue.js文檔，在后面我也會通過例子來說明。
【style】
樣式通過style標簽包裹，默認是影響全局的，如需定義作用域只在該組件下起作用，需在標簽上加scoped，
如要引入外部css文件，首先需給項目安裝css-loader依賴包，打開cmd，進入項目目錄，輸入npm install css-loader,回車。安裝完成后，就可以在style標簽下import所需的css文件，例如：
這樣，我們就可以把style下的樣式封裝起來，寫到css文件夾，再引入到頁面使用，整個vue頁面也看上去更簡潔。
router文件夾下，有一個index.js，即為路由配置文件
這里定義了路徑為"/"的路由，該路由對應的頁面是Hello組件，所以當我們在瀏覽器url訪問http://localhost:8080/#/時就渲染的Hello組件
類似的，我們可以設置多個路由，‘/index","/list"之類的，當然首先得引入該組件，再為該組件設置路由。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
例如現有組件footer.vue,原文地址
如果在其他頁面中有使用到該組件可以如下：
歡迎來到人員管理系統
（1）引入組件 import FooterNav from "../../components/footer.vue"
（2）局部注冊 注意寫在export default內部，components:{FooterNav}，該寫法為es6寫法阮一峰es6教程，將視圖中的使用的組件和相關數據對外開放，在內部vue-loader會進行相關操作的處理
（3）使用組件
注意：相對路徑中./為當前目錄../為上級目錄
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107369.html
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運，我不曉得。我只曉得，不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處 查看github最新的Vue...
閱讀 3711·2023-04-25 22:43
閱讀 3706·2021-09-06 15:15
閱讀 1332·2019-08-30 15:54
閱讀 3543·2019-08-30 14:20
閱讀 2884·2019-08-29 17:16
閱讀 3117·2019-08-29 15:28
閱讀 3397·2019-08-29 11:08
閱讀 1071·2019-08-28 18:05
