vuejs初學入門環境搭建

1、Nodejs:
    一、安裝下載:http://nodejs.cn/download/
    二、Node.js安裝配置: http://www.runoob.com/nodejs/nodejs-install-setup.html(三、4點都有說明)
    三、版本查詢:cmd命令提示符: node --version
    四、檢測PATH環境變量是否配置了Nodejs: cmd命令提示符爲:   pathhtml

2、vuejs開發vue

1.安裝node.js(http://nodejs.cn/download/)node

2.基於node.js,利用淘寶npm鏡像安裝相關依賴webpack

 在cmd裏直接輸入:npm install -g cnpm –registry=https://registry.npm.taobao.org回車,等待安裝...git

注意: 若是提示錯誤npm WARN deprecated socks@1.1.10 就要下降web

下降npm版本   npm install npm@4.6.1 -gvue-cli

 

3.安裝全局vue-cli腳手架,用於幫助搭建所需的模板框架npm

在cmd裏 1)輸入:cnpm install -g vue-cli,回車,等待安裝...框架

            2).輸入:vue,回車,若出現vue信息說明表示成功post

4.建立項目

在cmd裏輸入:vue init webpack vuedemo(項目文件夾名),回車後等待,出現‘git’下的項,可按下圖操做

5.安裝依賴

在cmd裏  1).輸入:cd vuedemo(項目名),回車,進入到具體項目文件夾

             2).輸入:cnpm  install,回車,等待一小會兒

回到項目文件夾,會發現項目結構裏,多了一個node_modules文件夾(該文件裏的內容就是以前安裝的依賴)

基於腳手架建立的默認項目結構以下圖所示:

6.測試環境是否搭建成功

方法1:在cmd裏輸入:cnpm run dev

方法2:在瀏覽裏輸入:localhost:8080(默認端口爲8080)

運行起來後的效果以下圖所示:

 

參照原文:http://blog.csdn.net/luckylqh/article/details/52863026 和https://www.cnblogs.com/learnings/p/6261108.html

注:Vue-cli搭建項目後的目錄結構不理解的能夠從這裏瞭解:http://www.jb51.net/article/118561.htm

相關文章
相關標籤/搜索