Vue/Element-uiインストール構築開発環境(一)

Elementはお腹が空いていますか?開発チームが発表したvueベースのセットです.js2.0のPC Web端末開発フレームワーク.
Element中国語ドキュメント:https://element.eleme.cn/#/zh-CN
 
1.ノードのインストール
 
開発フレームワークも環境もNodeが必要です.jsなので、nodeをインストールする必要があります.js環境、
vueの実行はnodeのnpm管理ツールに依存して実現され、Node公式サイトはアドレスをダウンロードします.https://nodejs.org/en/download/.
インストールプロセスはNextで行い、インストールが完了すると、cmdを開いて入力コマンドを開始できます.
node-vを入力して、車に戻ってnodeバージョン番号を表示し、バージョン番号が表示されるとインストールに成功します.
 
2.npmアドレスの置換
 
npmは海外なので、使用速度が遅いかもしれません.だから私たちは宝を洗うcnpmミラーを使っています.淘宝のcnpmコマンド管理ツールは、デフォルトのnpm管理ツールに代わることができます.
cmdにコマンドを入力すればいいです.このステップはスキップできます.

1 npm i -g cnpm --registry=https://registry.npm.taobao.org

 
3.グローバルインストールvue-cliミラー
 
cmdにコマンドを入力してvue-cliをインストールします.

1 cnpm i -g vue-cli

インストールが完了すると、コマンドにvueを入力すると、vueの情報が出力され、インストールに成功したことを示します.
 
4.vue-cliを使用してvueプロジェクトを初期化する
 
まずcmdを使用して、プロジェクトを作成するディレクトリに入ります.Dディスクに切り替えるコマンドなど、ディスクを切り替えるには:

1 D:

次に、cdパスコマンドを使用してフォルダにアクセスします.たとえば、次のようにします.

1 cd D:\MyProject

プロジェクトを作成し、コマンドを使用します.

1 vue init webpack YourProjectName

 
次に、いくつかのプロジェクトの基本情報を入力する必要があります. 
Project name:プロジェクト名は、変更する必要がなければそのまま返却すればいいです.注意:ここでは大文字は使用できません.Project description:プロジェクトの説明、デフォルトはA Vue.js project.直接車に戻って、書く必要はありません.Author:著者、gitを構成している場合は、彼は読み取ります.sshファイルのuser.Install vue-router? vueのルーティングプラグインをインストールするかどうか.Yはインストールを表し、Nはインストールする必要はありません.次のコマンドも同じです.Use ESLint to lint your code? ESLintでコードエラーとスタイルを制限するかどうか.推奨N.setup unit tests with Karma + Mocha? ユニットテストツールKarma+Mochaをインストールする必要があるかどうか.Setup e2e tests with Nightwatch?e 2 eをインストールしてユーザ動作シミュレーションテストを行うかどうか.Should we run npm install for you after the project has been created?(recommended)npmを選択します.
 
作成が完了すると、cmdに次のコマンドが表示されます.

1 cd YourPrpojectName
2 npm run dev 

作成に成功しました.
この2行のコマンドを入力して、プロジェクトを実行できます.
cmdはプロジェクト実行ポートを出力します.一般的にデフォルトはhttp://localhost:8080/.
ブラウザ入力アドレスを開くとvueのhello worldインタフェースが表示されます.
プロセスを終了したい場合は、起動したcmdでctrl+cを押してYを入力すると終了します.
 
5.Element-uiのインストール
 
コマンドの使用

1 npm i element-ui -S

cmdはインストールに成功した後を示します.
componentsフォルダの下にtestを作成します.vueファイル、elementUIの公式ドキュメントのコードをコピーします.テストを行います.

 1 <template>
 2     <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
 3         <el-menu-item index="1">    el-menu-item>
 4         <el-submenu index="2">
 5             <template slot="title">     template>
 6             <el-menu-item index="2-1">  1el-menu-item>
 7             <el-menu-item index="2-2">  2el-menu-item>
 8             <el-menu-item index="2-3">  3el-menu-item>
 9         el-submenu>
10         <el-menu-item index="3">
11             <a href="https://www.ele.me" target="_blank">    a>
12         el-menu-item>
13     el-menu>
14 template>
15 
16 <script>
17     export default {
18         data() {
19             return {
20                 activeIndex: '1',
21                 activeIndex2: '1'
22             };
23         },
24         methods: {
25             handleSelect(key, keyPath) {
26                 console.log(key, keyPath);
27             }
28         }
29     }
30 script>

 
そしてAppでvueにtestを導入する.vue

 1 <template>
 2   <div id="app">
 3     <img src="./assets/logo.png">
 4     <router-view/>
 5     <Test>Test>
 6   div>
 7 template>
 8 
 9 <script>
10     import Test from './components/test.vue'
11     
12 export default {
13     components:{
14   Test,
15  },
16   name: 'App'
17 }
18 script>
19 
20 <style>
21 #app {
22   font-family: 'Avenir', Helvetica, Arial, sans-serif;
23   -webkit-font-smoothing: antialiased;
24   -moz-osx-font-smoothing: grayscale;
25   text-align: center;
26   color: #2c3e50;
27   margin-top: 60px;
28 }
29 style>

 
メールでjsはelement-uiのjsとcssを導入する

1 import ElementUI from 'element-ui'
2 import 'element-ui/lib/theme-chalk/index.css'
3 Vue.use(ElementUI)

 
エラーがないことを確認してからコマンドを再使用

npm run dev

実行すると、element-uiのメニューコンポーネントがページに多数表示されます.
これで、開発環境は実行可能になりました.
 
最後に同期したコードの実行方法などを添付します.例えば、チーム開発では、みんなが協力して開発し、開発環境を構築する必要があります.個人的にもコード同期を行い、異なる開発ホストで開発する必要がある可能性があります.
本明細書の第1ステップ、第2ステップ、第3ステップに従う.後でwebpackをインストールする必要があります
コマンドを使用:

1 npm i -g webpack

その後、cmdでcdをプロジェクトパスに挿入します.
コマンドを使用:

1 npm install

プロジェクトのインストールに依存するのは、C#Nugetのようなリストアパッケージと理解できます.インストールが完了すると実行されます.