vue环境搭建具体步骤详解

1⃣️:安装node.js;

2⃣️:安装淘宝镜像(npm);(在用vue构建大型应用时用npm安装,npm能很好的和webpack或Broweserify模块打包器配合使用,同时vue也提供配套工具来开发单文件组件)

        在终端输入:npm install  -g cnpm --registry=http://registry.npm.taobao.org

  注:npm:(node package manager)node的包管理工具,用于node插件管理,安装,卸载管理依赖等;

  nvm:  node.js 版本管理工具,管理node版本和npm版本;

3⃣️:使用npm安装插件:

          命令提示执行npm install [-g] [-save-dev] : node 插件名称;

       例:npm install gulp -less -save -dev (-g: 是全局安装)

            (将会安装在 c:user\Administator\AppData\Roaming\npm. 并且写入系统环境变量)

      非全局安装:将会安装在当前定位目录;

      全局安装:可以通过命令在任何地方调用它;

扫描二维码关注公众号,回复: 11033715 查看本文章

      本地安装:将安装在定位目录的node_modules文件夹下通过require()调用;

       -save:将保存在配置信心至package.json (pakage.json)是node.js项目配置文件;

       -dev:  保存至package.json的devDependencies节点(不指定-dev将保存至dependencies节点)

为什么要保存至package.json?

      因为node插件包相对来说非常庞大,所以不加入版本管理,将配置信息写入package.json并将其加入版本管理,其他开发者对应下载即可(名令提示符执行npm insatall则会根据package.json下载所有需要的包)

     使用npm卸载插件:

      npm update[-g] [-save -dev]

(不要直接删除本地插件包);

使用npm 更新插件:npm update [-g] [-save -dev]

更新全部插件: npm update[ -save -dev]

查看npm 帮助 npm help;

查看当前目录已安装插件: npm list

cnpm:

     因为npm安装掺进啊是从国外服务器下载受网络影响大可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事,来自官网的一个完整(npmjs.org)镜像;

安装完后最好查看cnpm -v或关闭命令提示符重新打开,安装完直接使用可能会出现错误;

cnpm跟npm的用法完全一致,只是在执行命令时将npm改成cnpm;

注:vue里脚手架(vue cli)安装一次就可以了;

    安装vue cli命令:npm install --global vue-cli;

(vue-cli 号称vue全家桶,本滴运行环境即使由它创建);

vue-cli脚手架的作用:

   在vue里脚手架帮助我们编写号基础的代码;

可以帮助我么创建好:目录结构、本地调试、热加载、单元测试;

     安装过脚手架之后就可以直接建项目了: vue inst webpack  项目名  ;

   如果环境已经搭建好需要运行一个项目有三个步骤:

  1、进入项目;

  2、安装依赖(即输入命令 cnpm install)

  3、运行npm run dev

   如果项目已经安装过依赖直接运行项目就行了

  安装过依赖的项目会在文件里生成一个node_modules文件夹;

注:node -v:检查node版本号;

        npm -v: 检查npm包版本号;

发布了54 篇原创文章 · 获赞 4 · 访问量 6944

猜你喜欢

转载自blog.csdn.net/Geezer_007/article/details/105665443