MAC搭建调试Vue

MQ
2,240 阅读3分钟

1,安装node.js node.js下载:nodejs.org/en/download…

2,安装vue

  • 若之前通过npm install vue-cli -g 安装了旧版本的(2.9.6)可以通过npm uninstall vue-cli -g或者yarn global remove vue-cli先卸载。
  • 新版的通过 sudo npm install -g @vue/cli 或者 yarn global add @vue/cli全局安装
  • vue -V 可以查看版本

3，创建vue项目

  • 通过vue create xxx 来创建。项目名称不能有大写字母和汉字
  • 配置的选择的选择，选择手动配置(初次选择有default和Manually select features两个选项)，第一个是我原来配置过一次，可以选择原来自己保存的配置方案。


  • 进入配置选择，空格：单选选中，a 全选，i 反选。 回车：确定


  • 如上图

babel：javascript转译器，将最新版的js语法（es6、es7）转换为现阶段浏览器可以兼容的js代码
typescript：使用 TypeScript 书写源码
PWA：渐进式WEB应用
Router：使用vue-router
Vuex：使用vuex
CSS Pre-processors：css预处理器
Linter / Formatter：代码规范标准
Unit Testing：单元测试
E2E Testing：e2e测试

  • 敲enter确定之后，开始配置细节。
  • router路由管理器是否使用history模式，history需要服务器支持，这里可以了解下router.vuejs.org/zh/guide/es… 我选了no


  • CSS Pre-processors css预处理


  • Linter / Formatter 代码风格，格式校验(我的第一种方案选的标准配置standard config,这里我想换成Prettier).


  • lint方式(我的第一个方案只选择了 lint on save 这里我全选)


  • 选择这些自定义配置放置在哪里，这些配置文件你是想放在package.json里面还是单独放在外面。编辑器一般默认会在项目根目录下寻找配置文件。  In dedicated config files 在专用的配置文件中 In package.json 在 package.json 中。


  • 是否保存作为以后项目的预配置，这样以后你就可以使用这种方案。


  • Save preset as:输入方案的保存名称。

#遇到问题:Error saving preferences: make sure you have write access to /Users/mqing/.vuerc.(EACCES: permission denied, open '/Users/mqing/.vuerc')

  • 意思是：保存首选项时出错：请确保您具有对/Users/mqing/.vuerc的写访问权限。（EACCES:权限被拒绝，打开'/Users/mqing/.vuerc'）


  • 我特意重新创建使用 sudo vue create xxx  命令验证了一下，可以正常保存配置。我找到了/Users/mqing/.vuerc 文件(.vuerc是一个隐藏文件)，打开可以看到里边的首选项


#问题：gyp ERR! 或者Cannot find module 'node-sass‘

  • 描述：gyp ERR! configure error。或者，Module build failed (from ./node_modules/sass-loader/lib/loader.js): Cannot find module 'node-sass‘
  • 出现时机，在执行vue create xxx 的时候出现
  • 解决方案：npm cache clean -force清理缓存

               npm install -g mirror-config-china 淘宝的镜像配置

               npm install node-sass

    #关于 npm install -g mirror-config-china：是为中国内地的Node.js开发者准备的镜像配置，大大提高node模块安装速度。

    执行open .npmrc 打开npm的镜像源配置是这样的 (之前用的是原始的国外镜像)


    #关于cnpm 的淘宝npm镜像官方说明：developer.aliyun.com/mirror/NPM?…

    你可以使用我们定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

    $ npm install -g cnpm --registry=https://registry.npm.taobao.org

注：安装之后如下
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
/usr/local/bin/cnpm -> /usr/local/lib/node_modules/cnpm/bin/cnpm
+ cnpm@6.1.1
added 685 packages from 953 contributors in 39.152s

    安装模块

    从 registry.npm.taobao.org 安装所有模块. 当安装的时候发现安装的模块还没有同步过来, 淘宝 NPM 会自动在后台进行同步, 并且会让你从官方 NPM registry.npmjs.org 进行安装. 下次你再安装这个模块的时候, 就会直接从 淘宝 NPM 安装了.

       $ cnpm install [name]

    同步模块

    直接通过 sync 命令马上同步一个模块, 只有 cnpm 命令行才有此功能:

        $ cnpm sync connect

    当然, 你可以直接通过 web 方式来同步: /sync/connect

        $ open https://npm.taobao.org/sync/connect

    其它命令

    支持 npm 除了 publish 之外的所有命令, 如:

        $ cnpm info connect

4，运行vue项目

  • 如下图 $ npm run serve



  • 然后在浏览器可以打开图中的url,需要保持终端Terminal的运行。


avatar
文章
阅读
粉丝