1ページのアプリケーションを作成するためのベースとノード＆VUE-CLI＆要素UI NPM VUE
開発環境
10勝
ノードv10.15.3-x64.msi
ダウンロード：
インストールノード
インストールVUE-CLI
1、インストールノードv10.15.3-x64.msi
2、登録したアドレスを設定します
海外NPM公式倉庫ので、時々、ダウンロード速度が非常に遅くなりますが、そこに淘宝網のミラーはすぐに、ダウンロードパッケージの速度を使用することができます。そして、ミラーは定期的に同期さNPMの淘宝網公式のリポジトリを更新しています。
NPM設定セットレジストリhttps://registry.npm.taobao.org
パッケージをインストールするコマンドを実行するときにこのように、NPMは、ダウンロードパッケージに淘宝網のミラーを開始します。
設定されていない場合、パッケージは間違いが中に発生する可能性があります
NPM ERR！コードZ_BUF_ERROR
NPM ERR！errnoを-5
NPM ERR！ZLIB：ファイルの予期しない終了
NPM ERR！この実験の完全なログがで見つけることができます：
3、グローバルインストールツール足場VUE-CLI
NPMインストールVUE-CLI -g
VUEプロジェクトの作成
図1に示すように、ストレージ・アイテムにルートディレクトリは、VUE-INITのWebPACK <パッケージ>コマンドを実行しました
CD / D E：\ MyProjectsで\ TMP
E：\ MyProjectsで\ TMP> VUE-INIT WebPACKのフロントエンド
プロジェクト名を入力するには？プロジェクト名（フロントエンド）、単にEnterキーを押します、または異なる入力します（デフォルト値の一部は、括弧内に以下同じ）
プロジェクト名を入力するには？プロジェクトの説明（A Vue.jsプロジェクト）は、Enterキー、または他の入力を押すことができます
入力するには？著者の著者名
？Vueのビルド（キーの矢印を使用します）
> Runtime + Compiler: recommended for most users运行时编译，可按上下方向键切换选项，选好后按Enter键，到此处可直接按Enter键
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere 只运行时
? Install vue-router? (Y/n) 是否安装vue-router输入Y，按Enter键
? Use ESLint to lint your code? (Y/n) 是否在代码中使用ESLint输入n，按Enter键
? Set up unit tests (Y/n) 输入n,按回车键，即不设置单元测试
? Setup e2e tests with Nightwatch? (Y/n) 是否使用E2E 黑盒测试，输入n,按回车键，
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM 项目创建后是否运行npm install按上下方向键选择，此处可选择该项，直接回车，如果选择No, I will handle that myself,则执行npm run dev之前，需要执行npm install
Yes, use Yarn
No, I will handle that myself
... 略
cd frontend
npm run dev
... 略
注意：
1、 执行vue-init命令后，会出现交互式等待，等待输入、选择(通过按方向键)，具体输入、选择如上
2、验证
E:\MyProjects\TMP>cd frontend
E:\MyProjects\TMP\frontend>npm run dev
……略
15:16:15 I Your application is running here: http://localhost:8080
浏览器访问：
至此，项目文件结构如下
运行编译vue项目
1、修改frontend/index.html，如下，添加一下带背景色内容<p>hello my vue</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>frontend</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<p>hello my vue</p>
</body>
</html>
2、在vue项目根目录(例中为frontend目录)下，cmd命令行运行npm run build，运行完成后，会在当前目录下生成dist目录，里面包含一个 index.html 和一个文件夹static。
参考链接：
https://v1-cn.vuejs.org/guide/installation.html
安装element-ui
E:\MyProjects\TMP>cd frontend
E:\MyProjects\TMP\frontend>npm i element-ui
注意，如上，先要进入vue项目所在目录(例中为frontend目录)，然后执行 npm i element-ui命令，不然后面运行会出现以下错误：
如果需要按需引用element-ui,继续执行以下命令
npm install babel-plugin-component –D
修改main.js
修改main.js文件
两种导入方式
1、 导入整个element-ui
2、按需引用（假设插件已经安装）
修改App.vue
如下，修改、添加带背景色内容
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<el-input v-model="input" placeholder="请输入内容">输入框</el-input>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
input: ''
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
浏览验证
参考链接：
https://cloud.tencent.com/developer/section/1489858
https://cloud.tencent.com/developer/section/1489859