webapck+vue3+要素
ノードをインストールする
Vueをインストールする
npm インストール vue
vue-cli スキャフォールディングをインストールする
npm i -g @vue/cli-init
プロジェクトフォルダーを作成し、作成スクリプトを実行する
vue create プロジェクト名 / vue init webpack プロジェクト名
- vue create は、vue-cli3.x の初期化メソッドです。現在、テンプレートは固定されており、テンプレートのオプションは自由に設定できます。cue-cli2 プロジェクトの構造と設定方法とは異なる、vue-cli3 プロジェクトが作成されます。 . 具体的な設定方法については公式ドキュメントを参照してください。
- Vue init は vue-cli2.x の初期化メソッドです。github 上のいくつかのテンプレートを使用してプロジェクトを初期化できます。webpack は公式に推奨される標準テンプレート名です
必要なプラグイン vuex、router、babel、vue バージョン、Css プリプロセッサなどの構成を手動で選択します
- プロジェクト作成プロセスは統合されており、非常にシンプルです
作成後のプロジェクト構造には、
利用可能な router および vuex プラグインがすでに含まれています手動で再度導入する必要はありません
要素 UI の紹介
注:新しいバージョン 3.x は、現時点では ElementUI をサポートしていません。Element-plus を使用して
インストールできます。インストールも非常に簡単です。ルート ディレクトリに入り、
vue add element-plus
とその他のコマンドは一貫しています。以下の vue2.x を使用
1. src/styles フォルダーを作成し、要素のテーマカラーフォントなどを制御する ele-variables.scss ファイルを作成します。
scssの導入は比較的面倒ですが、テーマを変更するという方法もあります。
/* 改变主题色变量 */
$--color-primary: #60BB69;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
2. src/utils フォルダーを作成し、要素コントロールと全体的なスタイル コントロールの完全なコンポーネント リストが含まれる element.js ファイルを作成します。
import {
Button,
Table,
TableColumn,
Select,
Option,
Input,
Message,
MessageBox,
Menu,
Submenu,
MenuItemGroup,
MenuItem,
Dropdown,
Switch,
Header,
Pagination,
DropdownMenu,
DropdownItem,
Container,
Card,
Main,
Aside,
Breadcrumb,
BreadcrumbItem,
DatePicker,
Radio,
RadioGroup,
Tag,
Dialog,
Checkbox,
CheckboxGroup,
CheckboxButton,
Tabs,
TabPane,
Upload,
Badge,
Cascader,
Carousel,
CarouselItem,
Loading,
Tooltip
} from 'element-ui';
const element = {
install : (Vue) => {
Vue.use(Button),
Vue.use(Table),
Vue.use(TableColumn),
Vue.use(Select),
Vue.use(Option),
Vue.use(Menu),
Vue.use(MenuItem),
Vue.use(MenuItemGroup),
Vue.use(Submenu),
Vue.use(Input),
Vue.use(Header);
Vue.use(Switch),
Vue.use(Pagination),
Vue.use(Main);
Vue.use(Card);
Vue.use(Dropdown),
Vue.use(DropdownMenu),
Vue.use(DropdownItem),
Vue.use(Breadcrumb),
Vue.use(BreadcrumbItem),
Vue.use(Radio),
Vue.use(Aside);
Vue.use(DatePicker),
Vue.use(RadioGroup),
Vue.use(Tag),
Vue.use(Dialog),
Vue.use(Checkbox),
Vue.use(CheckboxGroup),
Vue.use(CheckboxButton),
Vue.use(Tabs),
Vue.use(TabPane),
Vue.use(Upload),
Vue.use(Container);
Vue.use(Badge),
Vue.use(Cascader),
Vue.use(Carousel),
Vue.use(CarouselItem),
Vue.use(Loading),
Vue.use(Tooltip),
Vue.prototype.$message = Message;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
}
};
import '@styles/ele-variables.scss';
export default element;
3. main.js エントリ ファイルに要素を直接導入しないでください。
'./utils/element' から要素をインポートします。
構成を減らす
Less は比較的明確で使いやすく、コンパイル環境の要件が比較的緩やかです。Sass をコンパイルするには Ruby をインストールする必要があること、中国では Ruby の公式 Web サイトにアクセスできないことを考慮すると、実際の開発では Less を選択することを好みます。
公式ウェブサイトが少ない
Webパックの設定
スキャフォールディングを使用して作成されたプロジェクトには組み込みの webpack が含まれており、
webpack を構成および理解するため
、および webpack2 を理解するため
に vue.config を作成できます。。。
view.config.js
公式 Web サイトの
vue.config.js はオプションの設定ファイルであり、このファイルがプロジェクトのルート ディレクトリに存在する場合 (package.json と同様)、@vue/cli-service によって自動的にロードされます。package.json で vue フィールドを使用することもできますが、この書き方では JSON 形式に厳密に従う必要があることに注意してください。
vue-cli-service の理解
npm run コマンドによる実行後、package.json スクリプトに記述された vue-cli と一緒にインストールされます。
1. package.json で依存関係を取得します ——>
2. 関連するプラグインを初期化します (vue-cli-plugin-element- plus) — —>
3. コマンドで使用されるモードを解析します (開発、テスト、運用) —>
4. 環境変数をロードし、ユーザー構成をロードし、プラグインを適用します —>
5. サービスを開始します (webpack-dev の開始後) -server、ターゲットファイル内 フォルダー内にコンパイルされたファイルは表示されず、リアルタイムコンパイルされたファイルはすべてメモリに保存されます）
vite+vue3+VantUI
ローカル ディスク上の powershell ディレクトリを選択します。 Vite を使用して Vue3TS プロジェクトをビルドし、Git 初期化 git init を実行します。
さまざまなプラグインのインストールと設定
npm i vant npm install vue-router npm install axios
その他の設定@パスエイリアス 認識されない設定ルーティングなどのさまざまな問題は詳細な説明なしで実行できます
ログインではパスワードの md5 暗号化を考慮する必要があります 複数のログインの確認コードはリンク アクセスのリダイレクトを指定します ログイン後、セッションは保存されますリクエストヘッダーが記述されるなど。
詳細なコードについてはgitee プロジェクトを参照してください。