VueJS 環境的搭建

使用git搭建VueJS開發環境

安裝git

git官網下載： https://www.git-scm.com/download/

安裝後進入 git bash 終端

安裝nodeJS

安裝git後，咱們須要使用npm工具，這時候就要安裝nodeJS了，由於nodejs會自帶npm工具。

nodeJS官網下載： https://nodejs.org/en/download/

以後就像安裝軟件同樣安裝就好了，成功後，能夠在git bash終端中查看版本，顯示了版本，就說明你已經安裝成功了。

$ node -v
$ npm -v

安裝webpack:最新版本

npm install --save-dev webpack

其餘安裝參考webpack官方文檔：

https://webpack.js.org/guides/installation/

安裝vueJS

官方文檔參考安裝：

https://cn.vuejs.org/v2/guide/installation.html

1. 獨立版本

可在Vue.js官網上直接下載vue.min.js並用<script>標籤引入。

下載Vue.js：https://vuejs.org/js/vue.min.js

2. 使用CDN

unpkg：https://unpkg.com/vue/dist/vue.js, 會保持和npm發佈的最新的版本一致。

3. NPM方法

以爲npm安裝速度慢的話，也能夠使用淘寶的鏡像及其命令cnpm

使用淘寶NPM鏡像：npm命令

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

搭建Vue工程

• 1. 安裝腳手架vue-cli:

  • 全局安裝腳手架vue-cli(命令行工具)：

    cnpm install

    $ cnpm install --global vue-cli

    or npm install

    npm install -g @vue/cli

    or yarn install

    yarn global add @vue/cli

  注意：-g或者global表示全局安裝，不加-g或global表示本項目安裝

  • Vue CLI 指南

  https://cli.vuejs.org/guide/

• 2. 初始化項目 Vue init <template-name> <project-name>

  Vue init webpack my-project

  以後進行一些配置，默認回車就行，完成後終端有項目啓動的提示。

  覺得以前本身搭建項目環境的時候，使用npm install的時候太慢了，並且會報錯，改下用淘寶鏡像初始化就好了

  npm install --registry=https://registry.npm.taobao.org
npm run dev

項目就搭建完成了！

固然若是你是用vue3.0版本的話，你的配置文件package.json就會自動生成命令

"scripts": { "build": "vue-cli-service build", "serve": "vue-cli-service serve" }

若是沒有跑成功，就須要看看配置文件package.json中的配置是否有問題。