vs code 第一次創建前端項目 vuejs 從零開始

2018年12月5日

第一階段

雖然網上教程很多，但是還是記錄一次完整的步驟

1.安裝nodejs,網上一堆的教程，基本上下載后傻瓜式一路next

2.安裝npm,網上一堆的教程，也是基本下載后傻瓜式一路next

3.安裝完成運行cmd，查看是否安裝成功

4.安裝cnpm

由於有些npm有些資源被屏蔽或者是國外資源的原因，經常會導致用npm安裝依賴包的時候失敗，所有我還需要npm的國內鏡像—cnpm。

在命令行中輸入 npm install -g cnpm –registry=http://registry.npm.taobao.org 然后等待

 

5.安裝完成如下圖。

 

6.安裝vue-cli腳手架構建工具

在命令行中運行命令 npm install -g vue-cli ，然后等待安裝完成。 

7.在桌面上新建項目 ResumeProgram 

vue init webpack firstVue

--這個命令的意思是初始化一個項目，其中webpack是構建工具，也就是整個項目是基於webpack的

其中 ResumeProgram  是整個項目文件夾的名稱，這個文件夾會自動生成在桌面

8.運行完成后會要寫項目名稱啊什么的，可以寫一下，也可以在后面的pakeage.json里面修改

9.vs code 打開項目，作者這些自己改就行，這個時候有許多的插件是沒有安裝的，文件夾內是沒有生成node_modules文件夾的

10.要安裝依賴包，首先cd到項目文件夾（ResumeProgram  文件夾），然后運行命令 cnpm install ，等待安裝。 

回車運行，抽個煙，慢慢等它自己安裝

11.安裝完成后查看vs code ,node_modules 已經出現在目錄中，這里全是需要的依賴包

12.想要運行這個項目的話，在【終端】-【新建終端】，在打開的輸入 npm run dev 回車，接着等

13.運行完成后，自動打開一個端口，復制這個鏈接到瀏覽器上，浪起來吧，少年~~~

 

 

 

第二階段  創建vue模板 

我們基本只需要關心 src 文件夾，其他的基本不管

【【【為了以后創建頁面省事，妥妥的必需，不然幾十個頁面搞死你】】】

ctrl+shift+p 出來吧，控制面板,輸入 snippet

 

配置模板，我用的是下面的這個

{

    "vue-template": {

     "prefix": "vue",

     "body": [

        "<template>",

" <div class=\"wrapper\">$0</div>",

"</template>",

            "",

            "<!-- Add \"scoped\" attribute to limit CSS to this component only -->",

"<style lang=\"scss\" scoped>",

"</style>",

"<script>",

"export default {",

" components:{},",

" props:{},",

" data(){",

" return {",

" }",

" },",

" watch:{",

            "",

                "},",

" computed:{",

            "",

                "},",

" methods:{",

                "",

                "},",

" created(){",

                "",

                "},",

            " mounted(){",

                "}",

"}",

            "</script>",

            

     ],

     "description": "my vue template"

    }

}

然后在新建的頁面 輸入 vue 會自動帶出這個模板

輕松+愜意 ~~

好了，今天就寫到這。看看明天能不能夠繼續！

下一篇就寫寫配置頁面和發布