足場を使用してVueプロジェクトを構築するための詳細な手順

vue-cliを使用してテンプレートプロジェクトを作成します

1.vue-cliとは

これは、vueによって公式に提供されている足場ツールです。スキャフォールディングツールは、プロジェクトに必要な環境、依存関係、およびその他の情報を自動的に構成するためのものです。

2.vue-cliをグローバルにインストールします

（1）npmのバージョンを確認します。最新バージョンにインストールすることをお勧めします。

//命令行查看版本号
node -v
npm -v
//升级npm（可选操作）
npm install -g npm

//修改为淘宝镜像（可选操作）
npm install -g cnpm --registry=https://registry.npm.taobao.org

（2）インストール

//全局安装 webpack
npm install webpack -g

//webpack 4.X 开始，需要安装 webpack-cli 依赖
npm install webpack webpack-cli -g

//查看版本号
webpack -v

//全局安装vue-cli
npm install -g vue-cli

//查看版本号
vue -V 

注：
　　「近くの解析中にJSON入力の予期しない終了」というエラーが表示された場合、
　　コマンドライン入力：npm cache clean --force

3.プロジェクトを作成します（コマンドラインメソッド）

（1）ファイルを保存するためのパスを作成します。例：E：\ vue \ vue-demo

//命令行进入该目录
cd E:\vue\vue-demo

//下载模板
vue init webpack vue-demo

//进入交互页面，根据自己情况选择
?Project name vue-demo  -- 项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters）。
? Project description A Vue.js project  -- 项目描述,随便写
? Author  --  作者名称
? Vue build standalone  -- 我选择的运行加编译时
    Runtime + Compiler: recommended for most users
? Install vue-router? Yes  --  是否需要 vue-router
? Use ESLint to lint your code? Yes  --  是否使用 ESLint 作为代码规范.
? Pick an ESLint preset Standard  --  一样的ESlint 相关
? Set up unit tests Yes  --  是否安装单元测试
? Pick a test runner 按需选择  --  测试模块
? Setup e2e tests with Nightwatch? 安装选择  --  e2e 测试
? Should we run `npm install` for you after the project has been created? (recommended) npm  --  包管理器，我选的NPM

（2）インストールが成功したら、プロジェクトディレクトリに入ります

//命令行进入该目录
cd E:\vue\vue-demo

//初始化项目
 npm install
 
//启动项目，根据package.json中的数据来启动
 npm run dev
 
//关闭项目
 Ctrl + C
 
//浏览器访问：
http://localhost:8080/

//项目打包上线
npm run build
将打包后生成的dist 目录中的文件拷贝到服务器的相应地址即可（比如tomcat的webapps目录下）。