收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > JavaScript技巧 > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

vue2.0實戰之使用vue-cli搭建項目(2)

Vue-cli是官方推薦的快速構建單頁應用的腳手架。官方給的建議,如果你是初次嘗試Vue,哪就老老實實用普通的書寫引入js文件,這里牽扯太多的東西,例如webpack、npm、nodejs等等,很容易成就從入門到放棄的思想。這篇文章本身就是按照官方的文檔中的構建流程來的(官方構建建議)。一下是構建過程。

一、 安裝 node.js

首先需要安裝node環境,可以直接到中文官網http://nodejs.cn/下載安裝包。

安裝完成后,可以命令行工具中輸入node -v和npm -v,如果能顯示出版本號,就說明安裝成功。

查看圖片

二、安裝 vue-cli

安裝好了 node,我們可以直接全局安裝 vue-cli:

npm install -g vue-cli

因為各種不可描述的原因,使用npm安裝會很慢,而且很容易出錯,所以推薦使用cnpm來安裝。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝成功后,使用 cnpm 安裝 vue-cli 和 webpack。

cnpm install -g vue-cli

安裝完成后,可以使用vue -V 查看是否安裝成功。

查看圖片

三、生成項目

首先需要在命令行中進入到項目目錄,然后輸入:

vue init webpack Vue-demo

其中 webpack 是模板名稱,Vue-demo 是自定義的項目名稱,命令執行之后,會在當前目錄生成一個以該名稱命名的項目文件夾。

配置完成后,可以看到目錄下多出了一個項目文件夾,里面就是 vue-cli 創建的一個基于 webpack 的 vue.js 項目

然后進入項目目錄(cd Vue-Project),使用 cnpm 安裝依賴

cnpm install

然后啟動項目

npm run dev

四、打包上線

自己的項目文件都需要放到 src 文件夾下

項目開發完成之后,可以輸入npm run build 來進行打包工作

npm run build

打包完成后,會生成 dist 文件夾,如果已經修改了文件路徑,可以直接打開本地文件查看

項目上線時,只需要將 dist 文件夾放到服務器就行了。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持積木網。

詳解VUE的狀態控制與延時加載刷新
在實際項目中,我們經常會遇到這種狀況,某些數據我們希望等到需要的時候再去獲取,或者某些數據我們需要刷新,但是不必立刻刷新,而是延時到

使用AngularJS2中的指令實現按鈕的切換效果
之前在AngularJS2中一種button切換效果的實現(二)中實現了按鈕的切換效果,但是方法比較low,這次我們使用Angular2的指令來實現。指令實現hover效果import

AngularJS2中一種button切換效果的實現方法(二)
之前用三目表達式和ng-class實現了按鈕切換效果,似乎達到了我的預期,但是我覺得還有改進空間,網上找了一些資料,大概還有以下幾種實現方式:路

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
上海时时乐基本走势综合版