記事では、写真の多くは、一定のスペースを占有します。必要があるVUEは、学生の背景のためのチュートリアルを書き、VUEの書き方を、新しいプロジェクトVUEを作成する方法を、私は思った、背景相棒が言っ書く、記事がやっとVUE関連するコンテンツや治療CSSの詳細を話します、情報の量を受け入れる不要な削減、学習VUEのコストを削減します。何か質問がある場合は、あなたは私私的な手紙に連絡することができ、不合理ではない持っている、と指摘してください！私は陵IIの近くにありました！
インストール環境
足場の取り付けVUE-CLI
1. nodejs環境をインストールします。
- ダウンロード：（nodejs）[https://nodejs.org/zh-cn/download/]
- インストール（やや）
2. VUE-CLIツールのシリーズをインストールします。
- NPM -gの@ VUE / CLIをインストール
- NPM -gする@ VUE / CLIサービス・グローバルをインストール
3. VUEはVUEのhello世界のプロジェクトを初期化する//ハローワールドを作成します
3.1 VUEのhello-世界を作ります
プロジェクトのNPMの実行から実行している3.2サーブ
多くの学生は、バックエンドエディタはアイデアです使用、私は、ここにこのアイデアのデモンストレーションを持って記事の内容に焦点を当てていない、あなたが見ることができますVUEプロジェクトを作成するためにアイデアを
単に初期化した後、プロジェクトを開い
たJavaの設定に関して、コンフィギュレーション・スタートアップスクリプト？スクリプトがはるかに簡単です
起動する：
アクセスアドレス
3.3プロジェクトの内容はじめに：
- node_modules、プロジェクトの依存関係モジュールのパッケージは、私たち？モジュールに必要なパッケージはこのディレクトリにダウンロードされ、我々は開発をコントロールしていません
- 国民は、静的ファイル？位置を置く程度大きな静的ファイルを置く??
- SRCプロジェクト？ソースファイル
- 小さな静的ファイルの資産
- などのログインボックス、入力コンポーネント、などのコンポーネント???コンポーネント、いくつかの共通のコンポーネント、
- APP.vue VUEプロジェクトのルートコンポーネント
- 一入口main.jsプロジェクトファイル、必要な基本的な?? JS、CSSのいくつかは、ここに組み込まれてもよいです
- package.json 项目依赖、介绍、基本配置等的清单文件，我们只需要看，scripts 里面的执行命令即可， 比如serve ->启动， build -> 构建打包
其他 项目运行配置文件，可忽略
Tips：上面的内容了解即可，可不用深入，继续往下添加页面路由
4. 增加路由vue-router
4.1 安装路由 npm install vue-router -S
使用4.2 在项目文件夹下新建router.js
4.3 写入代码
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from './components/HelloWorld';
Vue.use(Router);
export default new Router({
mode:'history',
routes: [
{
path: '/helloworld',
name: 'HelloWorld',
component: HelloWorld
}
]
})4.4. 新建page文件夹，文件夹下面的都是为页面 .vue文件
4.5 修改router.js
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from './components/HelloWorld';
import Index from './page/index';
import List from './page/list';
Vue.use(Router);
export default new Router({
mode:'history',
routes: [
{
path: '/helloworld',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/index',
name: 'Index',
component: Index
},
{
path: '/list',
name: 'List',
component: List
},
]
})访问路由：
5. 增加axios， http请求库 (https://www.kancloud.cn/yunye/axios/234845)
5.1 安装库 axios , npm install axios -S
5.2 使用
以上面的list.vue 文件为例：
<template>
<div>
<h3>这是一个list 页面</h3>
<ul>
<li>
<router-link to="/index">Index</router-link>
</li>
</ul>
<h3>下面是axios请求到到数据</h3>
<ul v-if="userList.length">
<li v-for="item in userList" :key="item.id">
姓名：{{item.name}}
</li>
</ul>
<ul v-if="!userList.length">
loading....
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: "Index",
data(){
return {
userList: []
}
},
created () {
axios('http://localhost:4000/get/alluser')
.then(res => {
this.userList = res.data.users;
})
}
}
</script>
<style scoped>
ul li {
list-style: none;
font-size: 16px;
}
</style>6. 增加脚手架可配置文件 vue.config.js
设置接口的跨域，vue-cli 启动的服务端口等
module.exports = {
devServer: {
port: 8090,
proxy: 'http://localhost:4000'
}
}7. 打包项目
7.1 执行命令 npm run build
7.2 构建结果
会在项目目录下生成dist 文件夹，文件夹下的文件就是我们需要的静态文件
我们把打包后的静态文件扔进服务器即可，或者我们用ngxix 部署静态文件，index.html 就是最终指向的入口文件。