如何安装vue并创建vue.js框架项目

墨蓝 2022-05-29 13:19 674阅读 0赞

1、安装vue工具

C:\Users\Administrator.USER-0GUONPPBHK>$ cnpm install vue
    '$' 不是内部或外部命令，也不是可运行的程序
    或批处理文件。
    
    C:\Users\Administrator.USER-0GUONPPBHK>cnpm install vue
    √ Installed 1 packages
    √ Linked 0 latest versions
    √ Run 0 scripts
    √ All packages installed (1 packages installed from npm registry, used 934ms, s
    peed 1010.57kB/s, json 1(278.91kB), tarball 664.97kB)

2、安装vue-cli

C:\Users\Administrator.USER-0GUONPPBHK>cnpm install --global vue-cli
    Downloading vue-cli to C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\np
    m\node_modules\vue-cli_tmp
    Copying C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\npm\node_modules\
    vue-cli_tmp\_vue-cli@2.9.3@vue-cli to C:\Users\Administrator.USER-0GUONPPBHK\App
    Data\Roaming\npm\node_modules\vue-cli
    Installing vue-cli's dependencies to C:\Users\Administrator.USER-0GUONPPBHK\AppD
    ata\Roaming\npm\node_modules\vue-cli/node_modules
    [1/20] commander@^2.9.0 installed at node_modules\_commander@2.15.1@commander
    [2/20] minimatch@^3.0.0 installed at node_modules\_minimatch@3.0.4@minimatch
    [3/20] multimatch@^2.1.0 installed at node_modules\_multimatch@2.1.0@multimatch
    [4/20] ora@^1.3.0 installed at node_modules\_ora@1.4.0@ora
    [5/20] rimraf@^2.5.0 existed at node_modules\_rimraf@2.6.2@rimraf
    [6/20] chalk@^2.1.0 installed at node_modules\_chalk@2.3.2@chalk
    [7/20] semver@^5.1.0 installed at node_modules\_semver@5.5.0@semver
    [8/20] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consoli
    date
    [9/20] uid@0.0.2 installed at node_modules\_uid@0.0.2@uid
    [10/20] user-home@^2.0.0 installed at node_modules\_user-home@2.0.0@user-home
    [11/20] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify
    [12/20] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read
    -metadata
    [13/20] coffee-script@1.12.7 existed at node_modules\_coffee-script@1.12.7@coffe
    e-script
    [14/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm
    -package-name@3.0.0@validate-npm-package-name
    [15/20] metalsmith@^2.1.0 installed at node_modules\_metalsmith@2.3.0@metalsmith
    
    [16/20] request@^2.67.0 installed at node_modules\_request@2.85.0@request
    [17/20] async@^2.4.0 installed at node_modules\_async@2.6.0@async
    [18/20] inquirer@^3.3.0 installed at node_modules\_inquirer@3.3.0@inquirer
    [19/20] download-git-repo@^1.0.1 installed at node_modules\_download-git-repo@1.
    0.2@download-git-repo
    [20/20] handlebars@^4.0.5 installed at node_modules\_handlebars@4.0.11@handlebar
    s
    deprecate metalsmith@2.3.0 › gray-matter@2.1.1 › coffee-script@^1.12.4 CoffeeS
    cript on NPM has moved to "coffeescript" (no hyphen)
    Recently updated (since 2018-03-17): 6 packages (detail see file C:\Users\Admini
    strator.USER-0GUONPPBHK\AppData\Roaming\npm\node_modules\vue-cli\node_modules\.r
    ecently_updates.txt)
      Today:
        → download-git-repo@1.0.2 › download@5.0.3 › decompress@4.2.0 › decompre
    ss-tarbz2@4.1.1 › unbzip2-stream@1.2.5 › buffer@3.6.0 › ieee754@^1.1.4(1.1.11
    ) (15:26:34)
      2018-03-23
        → download-git-repo@1.0.2 › download@5.0.3 › filenamify@2.0.0 › strip-ou
    ter@^1.0.0(1.0.1) (13:41:37)
        → download-git-repo@1.0.2 › download@5.0.3 › got@6.7.1 › lowercase-keys@
    ^1.0.0(1.0.1) (15:52:08)
      2018-03-22
        → metalsmith@2.3.0 › clone@^1.0.2(1.0.4) (05:21:25)
        → download-git-repo@1.0.2 › download@5.0.3 › decompress@4.2.0 › decompre
    ss-tar@4.1.1 › tar-stream@1.5.5 › bl@^1.0.0(1.2.2) (05:59:58)
      2018-03-20
        → commander@^2.9.0(2.15.1) (09:47:22)
    All packages installed (252 packages installed from npm registry, used 4s, speed
     1.8MB/s, json 235(2.46MB), tarball 4.45MB)
    [vue-cli@2.9.3] link C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\npm\
    vue@ -> C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\npm\node_modules\
    vue-cli\bin\vue
    [vue-cli@2.9.3] link C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\npm\
    vue-init@ -> C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\npm\node_mod
    ules\vue-cli\bin\vue-init
    [vue-cli@2.9.3] link C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\npm\
    vue-list@ -> C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\npm\node_mod
    ules\vue-cli\bin\vue-list

3、初始化vue并创建项目

C:\Users\Administrator.USER-0GUONPPBHK>vue init webpack vuecmp
    
    ? Project name vuecmp
    ? Project description A Vue.js project
    ? Author [youhai] 
    ? 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? (reco
    mmended) npm
    
       vue-cli · Generated "vuecmp".
    
    
    # Installing project dependencies ...
    # ========================
    
    npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at leas
    t 2.1.6 to avoid a serious bug with socket data flow and an import issue introdu
    ced in 2.1.0
    
    > chromedriver@2.37.0 install C:\Users\Administrator.USER-0GUONPPBHK\vuecmp\node
    _modules\chromedriver
    > node install.js
    
    Downloading https://chromedriver.storage.googleapis.com/2.37/chromedriver_win32.
    zip
    Saving to C:\Users\ADMINI~1.USE\AppData\Local\Temp\chromedriver\chromedriver_win
    32.zip
    Received 781K...
    Received 1568K...
    Received 2352K...
    Received 3136K...
    Received 3270K total.
    Extracting zip contents
    Copying to target path C:\Users\Administrator.USER-0GUONPPBHK\vuecmp\node_module
    s\chromedriver\lib\chromedriver
    Done. ChromeDriver binary available at C:\Users\Administrator.USER-0GUONPPBHK\vu
    ecmp\node_modules\chromedriver\lib\chromedriver\chromedriver.exe
    
    > uglifyjs-webpack-plugin@0.4.6 postinstall C:\Users\Administrator.USER-0GUONPPB
    HK\vuecmp\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 optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fse
    vents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
    1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
    )
    
    added 1549 packages in 211.183s
    
    
    Running eslint --fix to comply with chosen preset rules...
    # ========================
    
    
    > vuecmp@1.0.0 lint C:\Users\Administrator.USER-0GUONPPBHK\vuecmp
    > eslint --ext .js,.vue src test/unit test/e2e/specs "--fix"
    
    
    # Project initialization finished!
    # ========================
    
    To get started:
    
      cd vuecmp
      npm run dev
    
    Documentation can be found at https://vuejs-templates.github.io/webpack

4、切换项目路径

C:\Users\Administrator.USER-0GUONPPBHK>cd vuecmp

5、项目安装

C:\Users\Administrator.USER-0GUONPPBHK\vuecmp>cnpm install
    √ Installed 58 packages
    √ Linked 0 latest versions
    √ Run 0 scripts
    √ All packages installed (used 25ms, speed 0B/s, json 0(0B), tarball 0B)

6、项目编译

C:\Users\Administrator.USER-0GUONPPBHK\vuecmp>cnpm run dev
    
    > vuecmp@1.0.0 dev C:\Users\Administrator.USER-0GUONPPBHK\vuecmp
    > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
    
     10% building modules 0/1 modules 1 active ... webpack/hot/dev-server ./src/main
     10% building modules 1/2 modules 1 active ...ode_modules\webpack\hot\dev-server
     10% building modules 2/3 modules 1 active ...client\index.js?http://localhost:8
     10% building modules 2/4 modules 2 active ...or.USER-0GUONPPBHK\vuecmp\src\main
     10% building modules 2/5 modules 3 active ...uecmp\node_modules\webpack\hot\log
     10% building modules 2/6 modules 4 active ...dules\webpack\hot\log-apply-result
     10% building modules 2/7 modules 5 active ...p\node_modules\webpack\hot\emitter
     10% building modules 3/7 modules 4 active ...p\node_modules\webpack\hot\emitter
     10% building modules 4/7 modules 3 active ...p\node_modules\webpack\hot\emitter
     10% building modules 5/7 modules 2 active ...p\node_modules\webpack\hot\emitter
     10% building modules 6/7 modules 1 active ...p\node_modules\webpack\hot\emitter
     10% building modules 7/8 modules 1 active ...\webpack\hot nonrecursive /^\.\/lo
     10% building modules 7/9 modules 2 active ...\webpack-dev-server\client\overlay
     10% building modules 7/10 modules 3 active ...s\webpack-dev-server\client\socke
     10% building modules 8/10 modules 2 active ...s\webpack-dev-server\client\socke
     10% building modules 8/11 modules 3 active ...NPPBHK\vuecmp\node_modules\url\ur
     11% building modules 9/11 modules 2 active ...NPPBHK\vuecmp\node_modules\url\ur
     11% building modules 10/11 modules 1 active ...NPPBHK\vuecmp\node_modules\url\u
     11% building modules 10/12 modules 2 active ...ecmp\node_modules\vue\dist\vue.e
     11% building modules 10/13 modules 3 active ...\vuecmp\node_modules\events\even
     11% building modules 11/13 modules 2 active ...\vuecmp\node_modules\events\even
     11% building modules 12/13 modules 1 active ...\vuecmp\node_modules\events\even
     11% building modules 12/14 modules 2 active ...ode_modules\webpack\buildin\glob
     11% building modules 13/14 modules 1 active ...\vuecmp\node_modules\events\even
     11% building modules 14/15 modules 1 active ...0GUONPPBHK\vuecmp\src\router\ind
     11% building modules 14/16 modules 2 active ...PPBHK\vuecmp\node_modules\url\ut
     11% building modules 14/17 modules 3 active ...ecmp\node_modules\strip-ansi\ind
     11% building modules 14/18 modules 4 active ...node_modules\querystring-es3\ind
     11% building modules 14/19 modules 5 active ...cmp\node_modules\punycode\punyco
     11% building modules 14/20 modules 6 active ...node_modules\loglevel\lib\loglev
     11% building modules 15/20 modules 5 active ...node_modules\loglevel\lib\loglev
     11% building modules 16/20 modules 4 active ...node_modules\loglevel\lib\loglev
     11% building modules 16/21 modules 5 active ..._modules\sockjs-client\dist\sock
     12% building modules 17/21 modules 4 active ..._modules\sockjs-client\dist\sock
     12% building modules 17/22 modules 5 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap
     12% building modules 18/22 modules 4 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap
     12% building modules 18/23 modules 5 active ...ode_modules\webpack\buildin\modu
     12% building modules 19/23 modules 4 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap
     12% building modules 20/23 modules 3 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap
     12% building modules 21/23 modules 2 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap
     12% building modules 21/24 modules 3 active ...uecmp\node_modules\ansi-html\ind
     12% building modules 22/24 modules 2 active ...uecmp\node_modules\ansi-html\ind
     12% building modules 23/24 modules 1 active ...uecmp\node_modules\ansi-html\ind
     12% building modules 23/25 modules 2 active ...p\node_modules\html-entities\ind
     12% building modules 23/26 modules 3 active ...ode_modules\querystring-es3\deco
     12% building modules 23/27 modules 4 active ...ode_modules\querystring-es3\enco
     12% building modules 23/28 modules 5 active ...\vuecmp\src\components\HelloWorl
     12% building modules 24/28 modules 4 active ...\vuecmp\src\components\HelloWorl
     13% building modules 25/28 modules 3 active ...\vuecmp\src\components\HelloWorl
     13% building modules 26/28 modules 2 active ...\vuecmp\src\components\HelloWorl
     13% building modules 27/28 modules 1 active ...\vuecmp\src\components\HelloWorl
     13% building modules 27/29 modules 2 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap
     13% building modules 28/29 modules 1 active ...\vuecmp\src\components\HelloWorl
     13% building modules 28/30 modules 2 active ...ue-loader\lib\component-normaliz
     13% building modules 28/31 modules 3 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap
     13% building modules 29/31 modules 2 active ...ue-loader\lib\component-normaliz
     13% building modules 30/31 modules 1 active ...ue-loader\lib\component-normaliz
     13% building modules 30/32 modules 2 active ...\vuecmp\src\components\HelloWorl
     13% building modules 30/33 modules 3 active ...\vuecmp\src\components\HelloWorl
     13% building modules 31/33 modules 2 active ...\vuecmp\src\components\HelloWorl
     13% building modules 32/33 modules 1 active ...ue-loader\lib\component-normaliz
     13% building modules 32/34 modules 2 active ...les\html-entities\lib\xml-entiti
     13% building modules 32/35 modules 3 active ...s\html-entities\lib\html4-entiti
     13% building modules 32/36 modules 4 active ...s\html-entities\lib\html5-entiti
     13% building modules 33/36 modules 3 active ...s\html-entities\lib\html5-entiti
     13% building modules 33/37 modules 4 active ...les\vue-router\dist\vue-router.e
     14% building modules 34/37 modules 3 active ...les\vue-router\dist\vue-router.e
     14% building modules 35/37 modules 2 active ...les\vue-router\dist\vue-router.e
     14% building modules 36/37 modules 1 active ...les\vue-router\dist\vue-router.e
     14% building modules 36/38 modules 2 active ...ecmp\node_modules\ansi-regex\ind
     14% building modules 37/38 modules 1 active ...ecmp\node_modules\ansi-regex\ind
     14% building modules 37/39 modules 2 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap
     14% building modules 38/39 modules 1 active ...ecmp\node_modules\ansi-regex\ind
     14% building modules 38/40 modules 2 active ...\vuecmp\src\components\HelloWorl
     14% building modules 39/40 modules 1 active ...ecmp\node_modules\ansi-regex\ind
     14% building modules 39/41 modules 2 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap
     14% building modules 39/42 modules 3 active ...\vuecmp\src\components\HelloWorl
     14% building modules 39/43 modules 4 active ...ules\vue-hot-reload-api\dist\ind
     14% building modules 40/43 modules 3 active ...ules\vue-hot-reload-api\dist\ind
     14% building modules 40/44 modules 4 active ...e-style-loader\lib\addStylesClie
     14% building modules 41/44 modules 3 active ...e-style-loader\lib\addStylesClie
     15% building modules 42/44 modules 2 active ...\vuecmp\src\components\HelloWorl
     15% building modules 42/45 modules 3 active ...0GUONPPBHK\vuecmp\src\assets\log
     15% building modules 43/45 modules 2 active ...\vuecmp\src\components\HelloWorl
     15% building modules 44/45 modules 1 active ...\vuecmp\src\components\HelloWorl
     15% building modules 45/46 modules 1 active ...\vue-style-loader\lib\listToStyl
     15% building modules 46/47 modules 1 active ...de_modules\css-loader\lib\css-ba
     95% emitting
    
     DONE  Compiled successfully in 3566ms                                  18:07:43
    
    
     I  Your application is running here: http://localhost:8081

7、查看项目结构

![20180324184406834][]

[20180324184406834]: /images/20220529/36f98705b0264d9ba53df6d53c7bd289.png