美文网首页
如何创建一个Vue项目

如何创建一个Vue项目

作者: qqqywy | 来源:发表于2018-10-24 23:31 被阅读0次

    打开cmd命令行,安装node(带贴图)

    • 步骤:打开node官网 https://nodejs.org/en/download/,进行下载安装,输入node -v,如果出现版本信息即表示安装成功。
    • 输入node -v若显示版本号即表示安装成功

    安装淘宝镜像

    安装vue-cli脚手架构建工具

    • 输入命令 npm install -g vue-cli,安装完成即可

    1 直接使用webstorm创建,其他像idea类似

    2 本地先创建项目

    • 新建一个项目文件夹,右击用命令行运行
    • 运行命令vue init webpack 项目名称(lmy)
    在当前项目下运行
    • 出现项目名等信息时直接默认下一步
      -下面将会出现四个选项,除了install vue-router是yes而外,其他都是no,以免发生不必要的麻烦
    • 输入npm install安装依赖库
    • 输入npm run dev运行项目,即可成功

    test1

    vue 安装.png clipboard.png

    test2

    clipboard (1).png clipboard (2).png clipboard (3).png clipboard.png
    Microsoft Windows [版本 10.0.17134.285]
    (c) 2018 Microsoft Corporation。保留所有权利。
    
    C:\Users\lenovo>node -v
    v8.11.1
    
    C:\Users\lenovo>npm install -g vue-cli
    npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
    C:\Users\lenovo\AppData\Roaming\npm\vue-list -> C:\Users\lenovo\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
    C:\Users\lenovo\AppData\Roaming\npm\vue -> C:\Users\lenovo\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
    C:\Users\lenovo\AppData\Roaming\npm\vue-init -> C:\Users\lenovo\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
    + vue-cli@2.9.6
    added 5 packages from 10 contributors, removed 20 packages and updated 85 packages in 116.155s
    
    
       ╭───────────────────────────────────────────────────────────────╮
       │                                                               │
       │      New major version of npm available! 5.6.0 -> 6.4.1       │
       │   Changelog: https://github.com/npm/npm/releases/tag/v6.4.1   │
       │               Run npm install -g npm to update!               │
       │                                                               │
       ╰───────────────────────────────────────────────────────────────╯
    
    
    C:\Users\lenovo>d:
    
    D:\>cd VueStudy
    
    D:\VueStudy>vue init webpack my-album
    
    ? Project name my-album
    ? Project description A Vue.js project
    ? Author YEndless <895315416@qq.com>
    ? Vue build standalone
    ? Install vue-router? Yes
    ? Use ESLint to lint your code? No
    ? 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 "my-album".
    
    
    # Installing project dependencies ...
    # ========================
    
    
    > uglifyjs-webpack-plugin@0.4.6 postinstall D:\VueStudy\my-album\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 ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    
    added 1132 packages from 657 contributors and audited 10615 packages in 208.946s
    found 1 moderate severity vulnerability
      run `npm audit fix` to fix them, or `npm audit` for details
    
    # Project initialization finished!
    # ========================
    
    To get started:
    
      cd my-album
      npm run dev
    
    Documentation can be found at https://vuejs-templates.github.io/webpack
    
    
    
    D:\VueStudy>被《无问西东》感动了。 不是因为它人物塑造得有多好,它讲故事的方式有多好,它的剪辑手法有多厉害。事实 上有很多地方人物的动机不明确,讲故事的手法有...^Z^Z
    '被《无问西东》感动了。' 不是内部或外部命令,也不是可运行的程序
    或批处理文件。
    
    D:\VueStudy>npm install
    npm WARN saveError ENOENT: no such file or directory, open 'D:\VueStudy\package.json'
    npm notice created a lockfile as package-lock.json. You should commit this file.
    npm WARN enoent ENOENT: no such file or directory, open 'D:\VueStudy\package.json'
    npm WARN VueStudy No description
    npm WARN VueStudy No repository field.
    npm WARN VueStudy No README data
    npm WARN VueStudy No license field.
    
    up to date in 1.621s
    found 0 vulnerabilities
    
    
    D:\VueStudy>cd my-album
    
    D:\VueStudy\my-album>npm run dev
    
    > my-album@1.0.0 dev D:\VueStudy\my-album
    > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
    
     95% emitting
    
     DONE  Compiled successfully in 5371ms                                                                 09:17:15
     I  Your application is running here: http://localhost:8081
    
    

    相关文章

      网友评论

          本文标题:如何创建一个Vue项目

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