創建Vue項目過程

創建Vue項目過程


一、建立一個儲存vue項目的文件夾
二、在該文件夾目錄下的終端輸入npm install --global vue-cli
三、輸入vue init webpack test(test是我的項目名)
四、然後他會詢問你一些問題:

1、Project name項目名稱(確定按enter,否按N) (`按enter`)
2、Project description (A Vue.js project);項目描述(一vue.js項目)。(隨意輸入一段簡短介紹,不寫直接回車也行)	 (按enter) 		
3、Author    ;作者。(確定按enter,否按N)(`按enter`) 、
4、Vue build (Use arrow keys)>    。。。。。(`按enter`) 		
5、Install vue-router? (Y/n);安裝的路由?(Y/    n)。(可安可不安,建議安裝,因爲項目肯定能用上) (`選Y`) 		
6、Use ESLint to lint your code?    (Y/n);使用ESlint語法?(Y/    n)。(使用ESLint語法,就要做好心理準備,除非你非常懂ESLint語法,要不就會處處報錯,建議N) (`選N`) 		
7、Setup    unit tests with Karma + Mocha? (Y/n);設置單元測試?(Y / n)。(`選N`) 		
8、Setup    e2e tests with Nightwatch? (Y/n);Nightwatch建立端到端的測試?(Y / n)。(`選N`)
9、should we run ‘npm install’ for you after the ogject has been    created? ;(選擇Yes,use NPM)(`按enter`)

五、項目創建好之後可打開此文件夾,這樣打開終端輸入的時候不需要cd test到這個文件夾了。
六、安裝部分功能:

1、vue項目安裝使用stylus步驟

  • 1.輸入npm install stylus -D

  • 2.輸入npm install stylus-loader css-loader style

  • 3.找到webpack.base.conf.js文件,並在其中rules寫入配置

    {
           test:/\.css$/,
           loader:'style-loader!css-loader!stylus-loader',
           exclude: /node_modules/
     }
    
  • 4.在組建內部的style標籤中,加入scoped lang='stylus' rel='stylesheet/stylus'

2、vue項目安裝axios,輸入npm install axios
3、vue項目安裝good-storage插件,輸入npm install good-storage
4、vue項目安裝moment插件,用於格式化時間,輸入npm install moment調用方法如下:

 import objmoment from "moment"
 //定義方法
   getCurrentDateTime(time){
            return objmoment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
        }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章