Vue(Vue-cliによる大規模プロジェクトの構築)
1703 ワード
構築プロセス
1.gitとnodeをインストール.js
2.gitを開いてタオバオのミラーをダウンロードする
3.グローバルインストールvue-cli
4.初期化し、プロジェクト(vue 1)を作成し、車を押すだけでよい
5.作成したフォルダvue 1へ
6.パッケージをインストールする.json構成の依存は、複数のフォルダnode_のみです.modules
7.ローカルサーバを開くと、Vueのデフォルトテンプレートが表示されるアドレスが生成されます.
8.修正eslintrc.jsファイル構成、rulesというオブジェクトを見つけて、いくつかのルールを追加します
9.configファイルのindexにeslintrcを使用しない場合.jsは構成を変更してuseEslintを見つけてtrueをfalseに変更すればいい
10.srcファイルの下のcomponentsファイルにテンプレートmyComponentを新規作成します.vue
11.srcファイルの下のAppを開く.vue、デフォルトのテンプレートを削除して、自分のテンプレートmyComponentを導入して、styleコンポーネントにscopedコマンドを加えて、現在のcssに役割ドメインを追加して、それは現在の役割ドメインの下でしか使いやすくて、つまり親セットです
1.gitとnodeをインストール.js
2.gitを開いてタオバオのミラーをダウンロードする
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
3.グローバルインストールvue-cli
$ cnpm install vue-cli -g
4.初期化し、プロジェクト(vue 1)を作成し、車を押すだけでよい
$ vue init webpack vue1
5.作成したフォルダvue 1へ
$ cd vue1/
6.パッケージをインストールする.json構成の依存は、複数のフォルダnode_のみです.modules
$ cnpm install
7.ローカルサーバを開くと、Vueのデフォルトテンプレートが表示されるアドレスが生成されます.
$ npm run dev
8.修正eslintrc.jsファイル構成、rulesというオブジェクトを見つけて、いくつかのルールを追加します
'semi':2, //
'no-unnsed-vars':1, //
9.configファイルのindexにeslintrcを使用しない場合.jsは構成を変更してuseEslintを見つけてtrueをfalseに変更すればいい
useEslint: false
10.srcファイルの下のcomponentsファイルにテンプレートmyComponentを新規作成します.vue
{{name}}
export default {
data(){
return {
name:' '
}
}
}
11.srcファイルの下のAppを開く.vue、デフォルトのテンプレートを削除して、自分のテンプレートmyComponentを導入して、styleコンポーネントにscopedコマンドを加えて、現在のcssに役割ドメインを追加して、それは現在の役割ドメインの下でしか使いやすくて、つまり親セットです
import myComponent from './components/myComponent'
export default {
name: 'App',
components: {
myComponent
}
}