vue cli2简单配置

vue cli2简单配置

在项目文件夹下输入命令 vue init webpack vuecli2text(vuecli2text是自己命名的)
test> vue init webpack vuecli2text
? Project name vuecli2text
? Project description test vue cli2
? Author 
? Vue build standalone      
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

vue cli2脚手架的简单配置步骤

1.初始化vue init webpack runtimecompiler

PS D:\web\vuejs> vue init webpack runtimecompiler	

2.输入项目名字,输入runtimecomplier,敲回车

? Project name (runtimecompiler) //项目名字
? Project name runtimecomplier

3.项目描述,这里直接敲回车

? Project description (A Vue.js project) 

4.作者,敲回车

? Author 

5.一般选择第一个,各有优缺点

? Vue build (Use arrow keys)
> Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
  //选择后呈现
? Vue build standalone

Runtime + Compiler和Runtime-only区别:
Runtime-only性能更高、代码量更少
在这里插入图片描述

6.是否使用路由,按需选择,此处不使用,键入n

? Install vue-router? (Y/n)
 //键入n后呈现
? Install vue-router? No

7.规范代码,此处选择y(建议使用n,使用ESLint会严格规范代码,很容易报错)

? Use ESLint to lint your code? (Y/n)
//键入y后呈现
? Use ESLint to lint your code? Yes

选择y而不想使用ESLint,可以修改config文件夹下的index.js,将index.js文件里的useEslint:true改为useEslint:false,如下图:
在这里插入图片描述

8.选择Standard

? Pick an ESLint preset (Use arrow keys)
> Standard (https://github.com/standard/standard)//标准的
  Airbnb (https://github.com/airbnb/javascript)
  none (configure it yourself)
  
? Pick an ESLint preset Standard

9.单元测试,选择n

? Set up unit tests (Y/n) 

? Set up unit tests No

10.端到端测试,选择n

? Setup e2e tests with Nightwatch? (Y/n) 

? Setup e2e tests with Nightwatch? No

11.选择第一个npm

? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

? Should we run `npm install` for you after the project has been created? (recommended) npm

12.开始安装,稍等片刻

 vue-cli · Generated "runtimecompiler".


# Installing project dependencies ...
# ========================

npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.

> core-js@2.6.11 postinstall D:\web\vuejs\runtimecompiler\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library! 

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> ejs@2.7.4 postinstall D:\web\vuejs\runtimecompiler\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)


> uglifyjs-webpack-plugin@0.4.6 postinstall D:\web\vuejs\runtimecompiler\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {"node":"<8.10.0"} (current: {"node":"12.18.4","npm":"6.14.6"})
npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1376 packages from 713 contributors in 25.405s

35 packages are looking for funding
  run `npm fund` for details



Running eslint --fix to comply with chosen preset rules...
# ========================


> runtimecomplier@1.0.0 lint D:\web\vuejs\runtimecompiler
> eslint --ext .js,.vue src "--fix"


# Project initialization finished!
# ========================

To get started:

  cd runtimecompiler
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

文件目录结构
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue CLI 3是一种用于构建Vue应用程序的脚手架工具,它允许我们快速配置和使用路由。在Vue CLI 3中,我们使用Vue Router来处理和管理路由。 要配置路由,我们首先需要在项目中安装Vue Router。我们可以通过运行以下命令来安装它: ``` npm install vue-router ``` 安装完成后,我们需要在项目的`src`目录下创建一个`router`文件夹,并在其中创建一个名为`index.js`的文件。在该文件中,我们需要导入VueVue Router,并使用`Vue.use()`来安装Vue Router插件。 然后,我们可以定义路由,并创建一个新的Vue Router实例。我们可以通过使用`new VueRouter()`来创建它,同时传入一个配置对象,其中包含我们想要的路由规则。 在配置对象中,我们可以使用`routes`选项来定义我们的路由规则。路由规则是一个数组,包含不同的路由对象。每个路由对象都包含`path`和`component`属性。`path`属性指定了路由的路径,而`component`属性指定了与该路由对应的组件。 例如,我们可以定义一个简单的路由规则,如下所示: ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] const router = new VueRouter({ routes }) export default router ``` 在配置完成后,我们还需要在根组件中使用`router-view`组件来显示路由对应的组件。我们还可以使用`router-link`组件来创建导航链接,以便在不同的路由之间跳转。 总之,Vue CLI 3使得配置和使用路由变得非常简单。我们只需创建一个路由配置文件,定义路由规则,并在根组件中使用相应的组件来展示路由内容。使用Vue Router插件,我们可以轻松地管理和处理应用程序的路由。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值