構築、配備するVueのプロジェクト

最初のステップ:インストールnodeJsを

ステップ2:ファイル名を指定して実行cmdを、コマンドラインを開き、

第三段階:cnpmをインストールします。

1 NPMインストール-g cnpm --registry = HTTPS:// registry.npm.taobao.org 
2 NPMコンフィグセットレジストリのhttps:// registry.npm.taobao.org

インストールが成功したかどうか確認してください

 

 

第四段階:取付VUE-CLI

cnpm -g VUE-CLIをインストール

2.2ビルドプロジェクト

プロジェクトディレクトリに、新しいプロジェクトベースのWebPACKのテンプレートを作成:VUEのinitのWebPACK 

vue init webpack

説明:

 Vueのビルド==>パッケージ、キャリッジリターン。

 VUE-ルータ==>をインストールするには、VUE-ルータをインストールする場合、プロジェクトは確かに入力Yにそれを使用することになります。

   使用ESLintは、現在、私たちが必要とnを入力していないかどうかをテストするためのコード==> JS構文をlintの。

 ユニットテストのセットアップ==>ユニットテストツールは、現在インストールされている私たちはとても必要とnは入力しないでください。

 ==ナイトウォッチでセットアップE2Eテスト>現在、私たちはnを入力する必要はありませんツールのテストを終了する必要があります。

インストールは、次のディレクトリ完了です

1、ビルド:ビルドスクリプトディレクトリ

    1)build.js ==>本番環境のビルドスクリプト。

    2)check-versions.js   ==>  检查npm,node.js版本;

    3)utils.js   ==>  构建相关工具方法;

    4)vue-loader.conf.js   ==>  配置了css加载器以及编译css之后自动添加前缀;

    5)webpack.base.conf.js   ==>  webpack基本配置;

    6)webpack.dev.conf.js   ==>  webpack开发环境配置;

    7)webpack.prod.conf.js   ==>  webpack生产环境配置;

2、config:项目配置

    1)dev.env.js   ==>  开发环境变量;

    2)index.js   ==>  项目配置文件;

    3)prod.env.js   ==>  生产环境变量;

3、node_modules:npm 加载的项目依赖模块

4、src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

    1)assets:资源目录,放置一些图片或者公共js、公共css。这里的资源会被webpack构建;

    2)components:组件目录,我们写的组件就放在这个目录里面;

    3)router:前端路由,我们需要配置的路由路径写在index.js里面;

    4)App.vue:根组件;

    5)main.js:入口js文件;

5、static:静态资源目录,如图片、字体等。不会被webpack构建

6、index.html:首页入口文件,可以添加一些 meta 信息等

7、package.json:npm包配置文件,定义了项目的npm脚本,依赖包等信息

8、README.md:项目的说明文档,markdown 格式

9、.xxxx文件:这些是一些配置文件,包括语法配置,git配置等

二、启动项目

$ npm start/npm run dev

 

おすすめ

転載: www.cnblogs.com/binmengxue/p/12156205.html