vue cli2简单配置

    科技2022-07-12  158

    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

    文件目录结构

    Processed: 0.011, SQL: 8