在使用vue搭建乙個專案時,有一下兩種方法:首先,第一種script指令碼引入的方法,可以快速上手,不需要太多的前期配置,引入即可使用;但是,指令碼引入導致瀏覽器載入頁面速度變慢,影響使用者體驗。個人覺得,一般指令碼引入的方法試用於初學者練習vue或者對頁面載入速度要求不高的**。script指令碼引入
cli腳手架的方法(①從github轉殖;②npm安裝)
一、指令碼引入方法其次,第二種npm安裝vue腳手架的方法。這種方法,在實際的vue專案開發是必須的,前期需要自行搭建腳手架,相對指令碼引入來說比較麻煩,但是,對於開發者開發過程和使用者對於頁面載入效率的體驗是非常好的。(推薦使用)官網裡是這樣介紹的:
① 對於製作原型或學習,你可以這樣使用最新版本:
""
>
<
/script>
以上指令碼引入這兩個方法,根據你的需求引入乙個即可;""
>
<
/script>
注意:vue腳手架安裝,前提必須有:vue、node.js、npm
① github官網轉殖安裝vue腳手架。// 找乙個空的資料夾,在當前資料夾下開啟cmd,執行以下命令(轉殖):
//(轉殖好以後,就已經安裝好vue腳手架了)
// 移動到轉殖好的資料夾下的vue目錄下:
cd node_modules/vue
// 安裝依賴包
npm i
// 此時,乙個完整的vue腳手架已經搭建完畢。可以正常寫自己的專案了。
// 如果,需要預覽頁面,可以執行: (瀏覽器中輸入 localhost:8080 回車)
npm start
// 如果,要打包專案,可以執行:
npm run build
// 同上,需要在空的目錄下開啟cmd,執行
npm i vue // (沒有vue的,需要安裝下vue,要不後面會提示vue不是內部或外部命令)
// 腳手架安裝
npm i -g @vue/cli
// 安裝完成後,可以測試一下是否安裝成功(如果出現版本號,說明安裝成功!)
vue -
v// 注意:這裡的v是大寫!
// 使用腳手架建立乙個vue專案:
vue init webpack mypro1 // mypro1是專案名稱,可以自行修改
/*
**這裡會有一些腳手架初始化的配置詢問:**
1.project name:專案名,可以直接回車(預設mypro1),也可以自己修改。
2.project description:專案描述,直接回車
3.author:作者是誰,隨便填或直接回車
4.vue build:選擇題,一般選第乙個
4.1 runtime + compiler: recommended for most users//執行加編譯,官方推薦,就選它了
4.2 runtime-only: about 6kb lighter min+gzip, but templates (or any vue-specific html) are only allowed in .vue filesrender functions are required elsewhere//僅執行時,已經有推薦了就選擇第乙個了
6.use eslint to lint your code:是否用eslint來限制你的**錯誤和風格。n 新手就不用了,但實際專案中一般都會使用。
7.set up unit tests:是否安裝單元測試 ,輸入n
8.setup e2e tests with nightwatch?:是否安裝e2e測試,輸入 n
9.should we run `npm install` for you after the project has been created? (recommended) (use arrow keys) yes, use npm 選擇npm。
繼續回車,這樣就好了,靜待安裝即可!
*/// 以上步驟,腳手架安裝完畢
// 接下來,進入到專案目錄下:
cd mypro1
// 同上,預覽專案,執行: (瀏覽器中輸入 localhost:8080 回車)
npm start
// 打包專案,執行
npm run build
vue專案搭建
前提安裝好node不再贅述 可以在自帶的命令列中執行,也可以在webstome中執行 安裝cnpm npm install g cnpm registry 安裝webpack 這一步可以省略,反正你也不會用 cnpm install webpack g 全域性安裝 vuecnpm install g...
Vue專案搭建
vue cli 專案搭建及常用外掛程式安裝,報錯解決 環境搭建 node v 檢測版本 2.安裝webpack npm install webpack g webpack v 檢測是否安裝成功 專案搭建 1.npm install vue cli g vue v 接下來的步驟有兩種方式 1 cd 進...
vue專案搭建
1 安裝 映象,用cnpm裝東西很省事,目前沒被坑過 一下命令在cmd中完成 可以不按裝 npm install g cnpm registry 2 安裝vue腳手架 cnpm install g vue cli測試是否成功安裝 vue v 3.進入安裝的資料夾目錄,構建檔案結構目錄 vue ini...