美文网首页
Vue Demo搭建

Vue Demo搭建

作者: 嗚嗚雲 | 来源:发表于2021-07-23 11:47 被阅读0次

    for mac

    所需环境:

    • 安装 node 环境(包含 npm包管理器)
    • 安装 vue cli 脚手架
    • 更换淘宝镜像
    • 初始化第一个vue项目
    1. 安装 node 环境
     ~ brew install node
    
    ... 安装过程日志
    
     ~ node -v
    v16.4.2
     ~ npm -v
    7.18.1
    
    1. 安装 vue cli 脚手架
    npm install -g vue
    ~ vue -V
    2.9.6
    
    1. 更换淘宝镜像
    npm install -g cnpm –registry=https://registry.npm.taobao.org
    
    1. 初始化第一个vue项目
    ➜  test  vue init webpack firstApp
    
    
    ? Project name test
    ? Project description test
    ? Author hanzhen <hanzhen@xxx.com>
    ? Vue build standalone
    ? Install vue-router? Yes
    ? 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-cli · Generated "firstApp".
    
    
    # Installing project dependencies ...
    # ========================
    
    npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
    npm WARN deprecated eslint-loader@1.9.0: This loader has been deprecated. Please use eslint-webpack-plugin
    npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
    npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
    npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
    npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
    npm WARN deprecated browserslist@2.11.3: 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.
    npm WARN deprecated html-webpack-plugin@2.30.1: out of support
    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 fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
    npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
    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 querystring@0.2.0: The
    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 babel-eslint@8.2.6: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
    npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
    npm WARN deprecated uglify-es@3.3.9: "
    npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
    
    added 1450 packages in 32s
    
    
    Running eslint --fix to comply with chosen preset rules...
    # ========================
    
    
    > test@1.0.0 lint
    > eslint --ext .js,.vue src "--fix"
    
    
    # Project initialization finished!
    # ========================
    
    To get started:
    
      cd firstApp
      npm run dev
    
    Documentation can be found at https://vuejs-templates.github.io/webpack
    
    ➜  test
    ➜  cd firstApp
    ➜  firstApp  cnpm install
    npminstall WARN package.json not exists: /Users/hanzhen/Downloads/test/package.json
    ✔ Installed 0 packages
    ✔ Linked 0 latest versions
    ✔ Run 0 scripts
    ✔ All packages installed (used 7ms(network 5ms), speed 0B/s, json 0(0B), tarball 0B)
    ➜  test
    
    ➜  firstApp ll
    total 2224
    -rw-r--r--    1 hanzhen  staff   449B  7 23 11:42 README.md
    drwxr-xr-x   10 hanzhen  staff   320B  7 23 11:42 build
    drwxr-xr-x    5 hanzhen  staff   160B  7 23 11:42 config
    -rw-r--r--    1 hanzhen  staff   266B  7 23 11:42 index.html
    drwxr-xr-x  864 hanzhen  staff    27K  7 23 11:42 node_modules
    -rw-r--r--    1 hanzhen  staff   1.1M  7 23 11:42 package-lock.json
    -rw-r--r--    1 hanzhen  staff   2.1K  7 23 11:42 package.json
    drwxr-xr-x    7 hanzhen  staff   224B  7 23 11:42 src
    drwxr-xr-x    3 hanzhen  staff    96B  7 23 11:42 static
    ➜  firstApp npm run start
    
    > test@1.0.0 start
    > npm run dev
    
    
    > test@1.0.0 dev
    > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
    
    (node:19435) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
    (Use `node --trace-deprecation ...` to show where the warning was created)
     13% building modules 26/31 modules 5 active ...n/Downloads/test/firstApp/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
     95% emitting
    
     DONE  Compiled successfully in 2420ms                                                                                                                                                                                                            上午11:44:49
    
     I  Your application is running here: http://localhost:8080
    
    

    打开 http://localhost:8080

    image.png

    done!

    相关文章

      网友评论

          本文标题:Vue Demo搭建

          本文链接:https://www.haomeiwen.com/subject/friumltx.html