基本方式

最基本的方式就是在頁面文件中引入vue.js文件，步驟如下：

（1）引入vue.js文件（在自己創(chuàng)建的html文件中引入，以下使用001.html文件來舉例）

創(chuàng)建001.html文件，在該文件中引入vue.js文件

<!-- 本地引入，需要在本地下載好vue.js文件 -->
<script src="../js/vue.js"></script>

<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生產(chǎn)環(huán)境版本，優(yōu)化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

（2）創(chuàng)建Vue實例，和頁面中的DOM組件進行綁定

定義DOM：

    <div id="app">
        <p>{{ msg }}</p>
    </div>

定義model：

    <script>
        var vm = new Vue({ // 創(chuàng)建實例
            el: '#app',
            data: {
                msg: '橘貓吃不胖'
            }
        })
    </script>

在瀏覽器中打開001.html文件，效果如下：

腳手架方式（vue2.0）

1、安裝vue-cli

腳手架方式需要安裝vue-cli，新建文件夾vue-demo，在當前文件夾的路徑下打開cmd窗口，按照下面的命令全局安裝vue-cli

# 全局安裝
npm install vue-cli -g

可以查看安裝的vue的版本號：

vue --version

2、利用vue-cli創(chuàng)建項目

使用以下指令在當前文件夾下創(chuàng)建項目：

# 創(chuàng)建vue2.0項目
vue init webpack 項目名稱

使用該指令后，會出現(xiàn)一些提示：

? Project name # 項目名稱
? Project description (A Vue.js project) #項目描述，可以直接回車
? Author # 作者，可以直接回車
? Vue build standalone # 直接回車
? Install vue-router? (Y/n) # 安裝路由，一般選擇y
? Use ESLint to lint your code? (Y/n) # 是否安裝語法校驗器，一般選擇n
? Set up unit tests (Y/n) # 是否安裝單元測試，可裝可不裝
? Setup e2e tests with Nightwatch? (Y/n) # 一般選擇是
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself # 一般選擇第一個Yes, use NPM

然后等待安裝就可以。

安裝成功后會給我們顯示啟動的命令：

我們輸入它給出的命令，就可以運行項目：

# myapp是創(chuàng)建項目時起的項目名稱，每個人不一樣
cd myapp
npm run dev

最后顯示項目在http://localhost:8080可以運行，在瀏覽器中輸入該地址，就可以看到以下效果：

使用WebStorm集成環(huán)境創(chuàng)建vue-cli項目（vue3.0）

打開WebStorm，選擇File —> New —> Project

選擇最底下的Vue.js，然后在location處修改合適的項目路徑，點擊create，就可以創(chuàng)建成功了，該方式創(chuàng)建的是vue3.0版本的項目。

vue項目的目錄結構（vue2.0）

下面是使用腳手架方式創(chuàng)建的項目的目錄結構：

• build目錄：項目打包（webpack）的配置信息
• config目錄：項目的配置文件目錄
• node_modules目錄：項目的依賴模塊
• src：源程序目錄
• static：存放的靜態(tài)資源文件
• test：初始測試目錄
• index.html：項目入口頁面文件
• package.json：項目的配置文件
• README.md：項目的說明文件

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論