首页 > 技术文章 > Vue 结合 webpack 初始化项目(vue-cli 低于3.0版本和 vue-cli 3.0以上版本结合 webpack 分别是怎么初始化项目的)

zhousjcn 2020-04-26 21:52 原文

前提,必须安装过下列内容,如果没有安装可参考给出链接中安装步骤进行安装:

  1、安装过 node.js

    https://www.cnblogs.com/zhousjcn/p/12789508.html

  2、安装过 vue-cli

    https://www.cnblogs.com/zhousjcn/p/12783142.html

  3、安装过 webpack

     https://www.cnblogs.com/zhousjcn/p/12789518.html

 

# vue-cli低于3.0版本结合webpack初始化项目 #

一、在指定目录下执行下列命令,项目生成后就会在该目录下:

vue init webpack 项目名
例如:
vue init webpack sourceplan-ui-test

会出现需要填写部分:

project name 项目名
project description 项目描述
author 作者
vue build 打包方式,回车即可
vue-router 是否需要路由器,填y或者n
Use ESLint to lint your code 是否需要 js 语法检测,填y或者n,目前我们不需要 所以 n 回车
Set up unit tests 是否安装 单元测试工具 目前我们不需要 所以 n 回车;
Setup e2e tests with Nightwatch 是否需要 端到端测试工具 目前我们不需要 所以 n 回车;
Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) 项目创建后是否运行?选择  No, I will handle that myself

 

二、cd 进入刚刚创建的项目中安装各项依赖

cnpm i

 

三、启动

使用:npm run dev启动即可

 





 

# vue-cli 3.0以上版本结合webpack初始化项目 #

一、在指定目录下执行下列命令,项目生成后就会在该目录下:

vue create [ProjectName]
例:
vue create vue-project-init-test

 

二、会有一些选择,根据各自需求选择即可:

Please pick a preset:(Use arrow keys)

default (babel, eslint)    // 该选项后一路回车即可
Manually select features    // 选择此选项后会出现下列配置选择


? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
(*) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
( ) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

? Check the features needed for your project: Babel, TS, Router, CSS Pre-processors
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N

 

三、上面配置选择完毕后就是各项配置下载了,完毕后会在末尾出现下列代码提示: 

进入刚刚创建的目录:
cd [Project name]

新的启动方式
npm run serve

 

 

* 如果 vue-cli 3.0以上还想使用原来的方式初始化项目,执行下面命令即可:

 npm install -g @vue/cli-init

 

推荐阅读