Mac (cnpm安装、vue-cli安装、第一个vue-cli程序)

小咪咪 2022-08-29 06:41 246阅读 0赞

## 安装cnpm ##

**首先安装node\#**  
官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

**淘宝镜像安装cnpm，\#**  
在终端输入：  
`npm install -g cnpm --registry=https://registry.npm.taobao.org`

**失败显示**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY2MDQ5Nw_size_16_color_FFFFFF_t_70]

`npm set registry https://registry.npm.taobao.org`  
`npm set disturl https://npm.taobao.org/dist`  
`npm cache clean --force`

上面三行命令完成后，再次输入步骤二的命令：  
`npm install -g cnpm --registry=https://registry.npm.taobao.org`  
如果一切正常，输入下面的命令，查询是否安装成功：**cnpm -v** 如果出现下面的版本信息，说明cnpm安装成功

成功！
    cnpm@5.1.1 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js) 
    npm@5.5.1 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js) 
    node@8.9.0 (/usr/local/bin/node) 
    npminstall@3.2.1 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js) 
    prefix=/usr/local 
    darwin x64 16.7.0 
    registry=http://registry.npm.taobao.org

**加权限再试一下**  
`sudo npm install -g cnpm --registry=https://registry.npm.taobao.org --verbose`

**查询是否安装成功**  
`cnpm -v`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY2MDQ5Nw_size_16_color_FFFFFF_t_70 1]

问题记录  
[https://zhuanlan.zhihu.com/p/158241878][https_zhuanlan.zhihu.com_p_158241878]

--------------------

## vue-cli安装 ##

`sudo cnpm install vue-cli -g`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY2MDQ5Nw_size_16_color_FFFFFF_t_70 2]

`vue list`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY2MDQ5Nw_size_16_color_FFFFFF_t_70 3]

--------------------

## 第一个vue-cli程序 ##

创建vue项目  
`vue init webpack myvue`

下载  
`zhangxinyue@localhost myvue % npm install 或者 cnpm install`

启动当前项目，结束可访问http://localhost:8080  
`zhangxinyue@localhost myvue % npm run dev`

zhangxinyue@localhost Documents % cd WebstormProject
    zhangxinyue@localhost WebstormProject % ls
    ks	study
    zhangxinyue@localhost WebstormProject % vue init webpack myvue
    
    ? Project name myvue
    ? Project description A Vue.js project
    ? Author zxy <zhangxinyue31@tal.com>
    ? Vue build standalone
    ? Install vue-router? No
    ? 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? (recom
    mended) no
    
       vue-cli · Generated "myvue".
    
    # Project initialization finished!
    # ========================
    
    To get started:
    
      cd myvue
      npm install (or if using yarn: yarn)
      npm run dev
      
    Documentation can be found at https://vuejs-templates.github.io/webpack

zhangxinyue@localhost WebstormProject % cd myvue
    zhangxinyue@localhost myvue % npm install 或者 cnpm install
    
    ✔ Installed 36 packages
    ✔ Linked 0 latest versions
    ✔ Run 0 scripts
    ✔ All packages installed (used 63ms(network 55ms), speed 0B/s, json 0(0B), tarball 0B)
    zhangxinyue@localhost myvue % npm run dev
    
    > myvue@1.0.0 dev
    > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
    
    (node:80735) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./2020/" in the "exports" field module resolution of the package at /Users/zhangxinyue/Documents/WebstormProject/myvue/node_modules/es-abstract/package.json.
    Update this package.json to use a subpath pattern like "./2020/*".
    (Use `node --trace-deprecation ...` to show where the warning was created)
    (node:80735) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./helpers/" in the "exports" field module resolution of the package at /Users/zhangxinyue/Documents/WebstormProject/myvue/node_modules/es-abstract/package.json.
    Update this package.json to use a subpath pattern like "./helpers/*".
    (node:80735) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
     13% building modules 25/29 modules 4 active ...nts/WebstormProject/myvue/src/App.vue{
         parser: "babylon" } is deprecated; we now treat it as {
         parser: "babel" }.
     95% emitting                                                                 b      
     DONE  Compiled successfully in 3318ms                               下午5:01:17
    
     I  Your application is running here: http://localhost:8080

[https://blog.csdn.net/okForrest27/article/details/106849246?ops\_request\_misc=%257B%2522request%255Fid%2522%253A%2522162772061916780261935179%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request\_id=162772061916780261935179&biz\_id=0&utm\_medium=distribute.pc\_search\_result.none-task-blog-2alltop\_positive~default-1-106849246.first\_rank\_v2\_pc\_rank\_v29&utm\_term=%E7%8B%82%E7%A5%9Evue&spm=1018.2226.3001.4187][https_blog.csdn.net_okForrest27_article_details_106849246_ops_request_misc_257B_2522request_255Fid_2522_253A_2522162772061916780261935179_2522_252C_2522scm_2522_253A_252220140713.130102334_2522_257D_request_id_162772061916780261935179_biz_id_0_utm_medium_distribute.pc_search_result.none-task-blog-2alltop_positive_default-1-106849246.first_rank_v2_pc_rank_v29_utm_term_E7_8B_82_E7_A5_9Evue_spm_1018.2226.3001.4187]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY2MDQ5Nw_size_16_color_FFFFFF_t_70]: /images/20220829/b88eb1a03a794a4a948fd16dc6b78671.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY2MDQ5Nw_size_16_color_FFFFFF_t_70 1]: /images/20220829/d2d5bf53f0644e958ec8e65d0c2b7d67.png
[https_zhuanlan.zhihu.com_p_158241878]: https://zhuanlan.zhihu.com/p/158241878
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY2MDQ5Nw_size_16_color_FFFFFF_t_70 2]: /images/20220829/46f7fdec5cb84520b1fff6decd64e8a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY2MDQ5Nw_size_16_color_FFFFFF_t_70 3]: /images/20220829/96f37dc1c8134dfc805e263c9914649a.png
[https_blog.csdn.net_okForrest27_article_details_106849246_ops_request_misc_257B_2522request_255Fid_2522_253A_2522162772061916780261935179_2522_252C_2522scm_2522_253A_252220140713.130102334_2522_257D_request_id_162772061916780261935179_biz_id_0_utm_medium_distribute.pc_search_result.none-task-blog-2alltop_positive_default-1-106849246.first_rank_v2_pc_rank_v29_utm_term_E7_8B_82_E7_A5_9Evue_spm_1018.2226.3001.4187]: https://blog.csdn.net/okForrest27/article/details/106849246?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162772061916780261935179%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162772061916780261935179&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-106849246.first_rank_v2_pc_rank_v29&utm_term=%E7%8B%82%E7%A5%9Evue&spm=1018.2226.3001.4187