最初のステップは、淘宝網のミラーを介してcnpmをインストールすることです。
npm i -g cnpm --registry=https://registry.npm.taobao.org
ステップ2：npmの設定を設定する
npm config set registry https://registry.npm.taobao.org
ステップ3：vueスキャフォールディングをインストールする
npm install -g @vue/cli
ステップ4：全体的な足場を設定する
cnpm i @vue/cli-init -g
手順5：コンピューターの詳細システム設定で
vue.cmdファイルが配置されているパスを構成します。vue.cmdファイルが配置されているパスを見つけます
環境変数をクリックします
ユーザー変数でパスを選択し、[編集]をクリックします
[新規]をクリックし、パスをコピーして、[保存]をクリックします
ステップ6：空のフォルダーを作成し、vsCodeを使用してこのフォルダーを開き、ターミナルを開いて次のコードを実行します。
最後のvue-demoはvueプロジェクトの名前であり、任意の名前を付けることができます。
vue init webpack vue-demo
ステップ7：準備ができたら、次の構成を待ちます。
上から順に、プロジェクト名、プロジェクトの説明、作成者、パッケージ方法、vue-router、eslint、単体テスト、e2eテストを構成し、npmまたはyarnを使用します。
ステップ8：コードルールvsCodeを使用してprettier-Codeをインストールする
ステップ9：プロジェクトのルートディレクトリに.prettierrc.jsファイルを作成し、次のルールを入力します（ルールはVueのeslintと競合しないように処理されています）
module.exports = {
// 一行最多 100 字符
printWidth: 100,
// 使用 2 个空格缩进
tabWidth: 2,
// 不使用缩进符，而使用空格
useTabs: false,
// 行尾需要有分号
semi: false,
// 使用单引号
singleQuote: true,
// 对象的 key 仅在必要时用引号
quoteProps: 'as-needed',
// jsx 不使用单引号，而使用双引号
jsxSingleQuote: false,
// 末尾不需要逗号
trailingComma: 'none',
// 大括号内的首尾需要空格
bracketSpacing: true,
// jsx 标签的反尖括号需要换行
jsxBracketSameLine: false,
// 箭头函数，只有一个参数的时候，也需要括号
arrowParens: 'always',
// 每个文件格式化的范围是文件的全部内容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要写文件开头的 @prettier
requirePragma: false,
// 不需要自动在文件开头插入 @prettier
insertPragma: false,
// 使用默认的折行标准
proseWrap: 'preserve',
// 根据显示样式决定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 换行符使用 lf
endOfLine: 'lf',
};
手順10：「space-before-function-paren」eslintエラーレポート
を閉じるルートディレクトリで.eslintrc.jsファイルを見つけ、ルールの下に「space-before-function-paren」：「off」を追加します。
11番目のステップ：lessの使用
lessファイルを直接インポートすると、エラーが報告され、less-loaderが見つかりません。この問題を解決するには、lessとless-loaderをインストールする必要があります。Vueは次のように書いています。 Webpack構成が少ないほど、これら2つの依存関係をダウンロードする必要があります。
yarn add less less-loader
或
npm install less less-loader --save
しかし、インストール後もエラーTypeErrorが見つかりました：this.getOptionsは関数ではありません。これは、最新バージョンのless-loaderがvueのless-loader構成と互換性がないためです。
npm uninstall less-loader
npm install less-loader@5.0.0
或
yarn remove less-loader
yarn add less-loader@5.0.0
興味のある学生は、次のプロジェクトでこのコードを見ることができます
ステップ12：axiosを使用してバックグラウンドインターフェイスをリクエストするaxiosyarnを
インストールするaxiosを
追加する
か
npmがaxiosをインストールする--save
axiosをvueglobalにマウントします; main.jsで
import Vue from 'vue'
import App from './App'
import router from './router'
+ import axios from 'axios'
Vue.config.productionTip = false
+ Vue.prototype.axios = axios
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {
App },
template: '<App/>'
})
コンポーネントで使用
<template>
<div>
这是vue的$emit的测试页面
</div>
</template>
<script>
export default {
name: 'emit',
data() {
return {
test: 'a'
}
},
methods: {
},
mounted() {
this.axios({
method: 'get',
url: '192.168.01:8000/dx',
data: {
name: 'dx'
}
})
}
}
</script>
13番目のステップ：mockjsはaxiosリクエストをインターセプトし、モックデータを取得し、フロントエンドとバックエンドを別々に開発します
npm install mockjs --save
或
yarn add mockjs
srcディレクトリにモックフォルダを作成し、mock.jsフォルダを作成します
import Mock from 'mockjs'
// eslint-disable-next-line
Mock.mock('192.168.01:8000/dx', {
// 这里的url地址其实可以换成一个字段，比如msg,下边请求时候对应就可以
name: '@cname',
'age|1-10': 10
})
main.jsフォルダーに導入します
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
+import './mock/mock'
Vue.config.productionTip = false
Vue.prototype.axios = axios
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {
App },
template: '<App/>'
})
コンポーネントでaxiosを使用する
<template>
<div>
这是vue的$emit的测试页面
</div>
</template>
<script>
export default {
name: 'emit',
data() {
return {
test: 'a'
}
},
methods: {
},
mounted() {
this.axios({
method: 'get',
url: '192.168.01:8000/dx',
data: {
name: 'dx'
}
}).then((response) => {
console.log(response)
})
}
}
</script>
手順14：パッケージ化時にコンソールとデバッガーを削除します
。UglifyJsPluginプラグインで、uglifyOptionsを構成し、上記の構成を追加します。
手順15：フロントエンドとバックエンドのインターフェイスの共同デバッグ。プロキシはクロスドメイン
設定を処理します。ここで設定する必要がある理由は、
上記のプロキシ構成を変更することで、他の場所でもプロキシを構成できるためです。
注：プロキシするときは、プロキシにmockjsを与えることを忘れないでください。オフにしないと、axiosがインターセプトされ、当然プロキシされません。main.jsにコメントアウトする
と、プロキシが開始されていることがわかりますが、プロキシインターフェイスが私によって落書きされ、プロキシが失敗します
。16番目のステップは、IEブラウザのpromiseの互換性の問題を解決することです
。Vueプロジェクトは通常Axiosを使用します。はバックグラウンドデータを要求する方法ですが、axiosはajaxのpromiseカプセル化であり、babel-loaderはpromiseの問題を解決するのに十分ではないため、babel-polyfillの追加インストールが必要です
yarn add babel-polyfill 或
npm install babel-polyfill --save
main.jsのトップレベルで紹介しますwebpack.base.conf.jsを見つけて、下の図に示すように赤いボックスのコンテンツを変更します。
ステップ17つまり、ブラウザがエラーを報告します無効なホスト/オリジンヘッダー
。ソリューションの原則webpack構成でdevServerを見つけることです。構成アイテムdisableHostCheckを追加します。true、
実際のvue-cliプロジェクトで、webpack.dev.conf.jsファイルを見つけ、次のコードを記述しますdevWebpackConfig.devServer.disableHostCheck = true
。ステップ18：vuexの使用vuex
はvueファミリーバケットの重要なメンバーです。1つは、プロジェクトが使用されていない可能性があるため、必要に応じて参照できます。
yarn add vuex 或
npm i vuex --save
srcフォルダの下に格納フォルダを作成し、index.js作成
index.jsを
import Vue from 'vue'
import Vuex from 'vuex'
//使用vuex的插件
Vue.use(Vuex)
//创建一个store对象
const store = new Vuex.Store({
// 定义的公共变量
state: {
count: 0
},
// state中的变量只能在mutations中通过方法修改
mutations: {
changeCount: function (state) {
state.count++
}
},
actions: {
},
getters: {
}
})
//导出这个对象
export default store
main.jsのvueインスタンスにマウントする必要があります。
ステップ19（オプションのUI）element-uiをインストールし、オンデマンドロードを構成します
element-uiインストールガイドhttps://element.eleme.cn/#/zh-CN/component/quickstart
yarn add element-ui 或
npm i element-ui --save
main.jsにelement-uiスタイルとelement-uiスタイルを導入してインストールします
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import 'babel-polyfill'
import Vue from 'vue'
// 添加element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import axios from 'axios'
import store from './store/index'
import './mock/mock'
// 安装element-ui的插件
Vue.use(ElementUI)
Vue.config.productionTip = false
Vue.prototype.axios = axios
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: {
App },
template: '<App/>'
})
element-uiのオンデマンドロードを構成し、.babelrcファイルを見つけ、次の構成を追加します。babel
-plugin-componentをインストールする必要があります
yarn add babel-plugin-component
或
npm i babel-plugin-component -D
19番目のステップ（オプションのUI）：ant-design-vueを使用する
ant-design-vueインストールガイドhttps://www.antdv.com/docs/vue/use-with-vue-cli-cn/
yarn add ant-design-vue 或
npm i ant-design-vue -D
yarn add babel-plugin-import 或
npm i babel-plugin-import -D
.babelrcファイルを変更し、babel-plugin-importを構成します
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
- "plugins": ["transform-vue-jsx", "transform-runtime"]
+ "plugins": [
+ "transform-vue-jsx",
+ "transform-runtime",
+ ["import", {
"libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
+ ]
}
コンポーネントでは、このように直接使用できます
import {
Button } from 'ant-design-vue';
最後に、vueプロジェクトを開始し、vsCodeターミナルにnpm run devと入力し、http：// localhost：8080をクリックしてプロジェクトページを表示します。