zoukankan      html  css  js  c++  java
  • 【非专业前端】vue+element+webpack

    先点这里(~ ̄▽ ̄)~

    环境搭建

    默认你已经安装了node.js

    下面安装vue和webpack

    npm install -g @vue/cli
    npm install -g @vue/cli-init
    
    npm install -g webpack
    npm install -g webpack-cli

     webpack-simple方式

    下面找到你的工程根目录,开始创建一个工程

    Microsoft Windows [版本 6.1.7601]
    版权所有 (c) 2009 Microsoft Corporation。保留所有权利。
    
    F:WebstormProjects>vue init webpack-simple my_test
    
    ? Project name my_test
    ? Project description A Vue.js project
    ? Author admin
    ? License MIT
    ? Use sass? Yes
    
       vue-cli · Generated "my_test".
    
       To get started:
    
         cd my_test
         npm install
         npm run dev

    按照提示,下面进行初始化

    F:WebstormProjects>cd my_test
    
    F:WebstormProjectsmy_test>npm install
    npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Bro
    wserslist >3.0 config used in other tools.
    
    > node-sass@4.9.3 install F:WebstormProjectsmy_test
    ode_modules
    ode-sass
    > node scripts/install.js
    
    Cached binary found at d:Users001977Application Data
    pm-cache
    ode-sass4.9.
    3win32-x64-57_binding.node
    
    > uglifyjs-webpack-plugin@0.4.6 postinstall F:WebstormProjectsmy_test
    ode_mod
    ulesuglifyjs-webpack-plugin
    > node lib/post_install.js
    
    
    > node-sass@4.9.3 postinstall F:WebstormProjectsmy_test
    ode_modules
    ode-sass
    
    > node scripts/build.js
    
    Binary found at F:WebstormProjectsmy_test
    ode_modules
    ode-sassvendorwin32-
    x64-57inding.node
    Testing binary
    Binary is fine
    npm notice created a lockfile as package-lock.json. You should commit this file.
    
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modulesfse
    vents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
    1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
    )
    
    added 879 packages in 101.204s
    
    F:WebstormProjectsmy_test>npm run dev
    
    > my_test@1.0.0 dev F:WebstormProjectsmy_test
    > cross-env NODE_ENV=development webpack-dev-server --open --hot
    
    Project is running at http://localhost:8080/
    webpack output is served from /dist/
    404s will fallback to /index.html

    最后访问

    用Webstorm打开,工程目录如下

    需要vue-router的话

    npm install vue-router --save

     这种方式我添加element后,启动失败,所以我放弃了这种方法

    F:WebstormProjectsmy_test>vue add element
    
    �  Installing vue-cli-plugin-element...
    
    + vue-cli-plugin-element@1.0.0
    added 1 package in 11.909s
    ✔  Successfully installed plugin: vue-cli-plugin-element
    
    ? How do you want to import Element? Fully import
    ? Do you wish to overwrite Element's SCSS variables? Yes
    ? Choose the locale you want to load zh-CN
     WARN  conflicting versions for project dependency "sass-loader":
    
    - ^6.0.6 injected by generator "undefined"
    - ^7.0.3 injected by generator "vue-cli-plugin-element"
    
    Using newer version (^7.0.3), but this may cause build errors.
    
    �  Invoking generator for vue-cli-plugin-element...
    �  Installing additional dependencies...
    
    updated 4 packages in 12.277s
    ⚓  Running completion hooks...
    
    ✔  Successfully invoked generator for plugin: vue-cli-plugin-element

    好像是什么字体错了

     webpack方式

    Microsoft Windows [版本 6.1.7601]
    版权所有 (c) 2009 Microsoft Corporation。保留所有权利。
    
    F:WebstormProjects>vue init webpack my_hello
    
    ? Project name my_hello
    ? Project description A Vue.js project
    ? Author admin
    ? Vue build (Use arrow keys)
    ? Vue build standalone
    ? Install vue-router? Yes
    ? Use ESLint to lint your code? Yes
    ? Pick an ESLint preset Standard
    ? Set up unit tests Yes
    ? Pick a test runner jest
    ? Setup e2e tests with Nightwatch? Yes? Should we run `npm install` for you after the project has been created? (recommended) npm
    
       vue-cli · Generated "my_hello".
    
    
    # Installing project dependencies ...
    # ========================
    
    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 browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
    npm WARN deprecated istanbul-lib-hook@1.2.1: 1.2.0 should have been a major version bump
    npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
    npm WARN deprecated @types/commander@2.12.2: This is a stub types definition for commander (https://github.com/tj/commander.js). commander provides its own type definitions, so you don't need @types/commander installed!
    
    > chromedriver@2.41.0 install F:WebstormProjectsmy_hello
    ode_moduleschromedriver
    > node install.js
    
    Downloading https://chromedriver.storage.googleapis.com/2.41/chromedriver_win32.zip
    Saving to C:UsersXXXAppDataLocalTempchromedriverchromedriver_win32.zip

     对,我卡在这里不动了,但是我发现你终止的话也没啥影响(之所以不动是因为连接不上啊,国外的网址)。

    后来发现:出现这个是因为选择了e2e,只要你不选择e2e,就不会出现这个

     然后添加elementUI组件

    F:WebstormProjectsmy_hello>vue add element
    
    �  Installing vue-cli-plugin-element...
    
    + vue-cli-plugin-element@1.0.0
    added 1 package in 23.093s
    ✔  Successfully installed plugin: vue-cli-plugin-element
    
    ? How do you want to import Element? Fully import
    ? Do you wish to overwrite Element's SCSS variables? Yes
    ? Choose the locale you want to load zh-CN
    
    �  Invoking generator for vue-cli-plugin-element...
    �  Installing additional dependencies...
    
    
    > node-sass@4.9.3 install F:WebstormProjectsmy_hello
    ode_modules
    ode-sass
    > node scripts/install.js
    
    Cached binary found at d:Users001977Application Data
    pm-cache
    ode-sass4.9.
    3win32-x64-57_binding.node
    
    > node-sass@4.9.3 postinstall F:WebstormProjectsmy_hello
    ode_modules
    ode-sas
    s
    > node scripts/build.js
    
    Binary found at F:WebstormProjectsmy_hello
    ode_modules
    ode-sassvendorwin32
    -x64-57inding.node
    Testing binary
    Binary is fine
    added 68 packages in 29.571s
    ⚓  Running completion hooks...
    
    ✔  Successfully invoked generator for plugin: vue-cli-plugin-element

     用Webstorm打开项目

    ..启动项目

    ..

    ..

    ..

    ..

    后来发现

    不设置e2e测试【Setup e2e tests with Nightwatch? No】,,,跑过去了

    ..

     执行最后那两句话:

     

    可以访问页面

     

     用Webstorm打开查看目录

     

     最后的摸索

    更新npm

    npm install npm@latest -g

    下面关于webpack

    所以说,webpack最好不要全局安装。

    而这仅仅用于手动安装

    我把项目全部放在F:WebstormProjects

    在这个目录下新建一个文件夹用来存放项目,比如test

    进入这个目录,先执行npm init 来生成package.json文件,一路回车即可

    Microsoft Windows [版本 6.1.7601]
    版权所有 (c) 2009 Microsoft Corporation。保留所有权利。
    
    F:WebstormProjects	est>npm init
    This utility will walk you through creating a package.json file.
    It only covers the most common items, and tries to guess sensible defaults.
    
    See `npm help json` for definitive documentation on these fields
    and exactly what they do.
    
    Use `npm install <pkg>` afterwards to install a package and
    save it as a dependency in the package.json file.
    
    Press ^C at any time to quit.
    package name: (test)
    version: (1.0.0)
    description: demo
    entry point: (index.js)
    test command:
    git repository:
    keywords:
    author:
    license: (ISC)
    About to write to F:WebstormProjects	estpackage.json:
    
    {
      "name": "test",
      "version": "1.0.0",
      "description": "demo",
      "main": "index.js",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1"
      },
      "author": "",
      "license": "ISC"
    }
    
    
    Is this ok? (yes)
    
    F:WebstormProjects	est>

    你会发现生成了一个json文件,但是你要修改其中的scripts

    ..

      "scripts": {
        "build": "node build/build.js",
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev"
      }

     ..然后执行下面两句话【在F:WebstormProjects est路径下】

    npm install --save-dev webpack
    npm install --save-dev webpack-cli

     ..

    ..目录下又多了两个东西

    ..最后安装vue和ElementUI

    npm install vue
    
    npm i element-ui -S

    你以为这就完了?不!还有很多!比我后端搞个东西还要复杂,我只是告诉你这些命令都是用于手动安装的。

     终极版-以后搭建都用它

    先介绍一下vue的cli

    ..

    ..

    所以,到这里,我们第一步需要安装cli工具

    npm install -g @vue/cli-init

     然后创建webpack工程

    ..

     

    ..最后安装elementUI

    ..启动

    npm run dev

    ..

    .

    ..查看工程目录,你可以用webstorm来打开

  • 相关阅读:
    【转】5亿个数找中位数
    C++二维数组名的再探索
    转载 图像卷积
    PowerDesigner的使用一
    Spring注解详解
    JSP页面以及简单的指令
    Javascript学习总结
    html第一天
    Chrome开发,debug的使用方法。
    SVN使用
  • 原文地址:https://www.cnblogs.com/LUA123/p/9566774.html
Copyright © 2011-2022 走看看