Vue环境搭建

Vue.js官网:vue.js官网
1、使用工具:vscode:Vs code官网
安装插件:Live Server(本地服务器方便开发)、Vetur(vue关键字高亮度)、Vue.js with TypeScrpit Snippets for VSCode
2、安装脚手架:

  • 安装node.js node.js官网
  • 查看脚手架版本(CMD):node -v
  • 查看npm版本:npm -v
    npm插件官网(所有的插件都可在此网站找到):npm插件网
  • vue CUI::VUE CUI官网
    • 全局:npm install -g @vue/cli
    • 淘宝提供的服务器:npm install -g cnpm --registry=https://registry.npm.taobao.org
    • 查看所有命令:vue --help
    • 创建vue项目 :vue create hello-world(vue ui:视图创建)
      • 选择目录:cd 路径
    • 项目发布:npm run serve

Vue Cli(脚手架)开发

一般公司不会用CDN,而是使用Vue Cli进行开发。

  • 脚手架需要的环境:

    • Node.js运行环境(这个环境可以让js独立运行)做前端的可以去学一下Node.js
    • npm(node package manage)依赖包(包含很多组件等,国外)
  • 脚手架的好处:

    • 1.脚手架可以大大的提高开发系效率;
    • 2.可以使用最主流的ECMAScript语法;
    • 3.通过Webpack实现编译查看效果(非浏览器编译);前端需要去学一下Webpack
    • 4.自动更新,可实时查看最新效果等;
  • 安装 Node.js运行环境:

    • 先下载node.js;下载地址:node.js官网
    • 安装一直下一步就OK了
    • 测试环境(CMD):node -v\npm -v
  • npm依赖

    • 可以去npm官网下载插件:npm官网
  • 安装Vue Cli(脚手架)

    • 安装Vue Cli可以直接看官网:安装Vue Cli官网
    • 在 CMD中输入:npm install -g @vue/cli(-g表示所有)
    • 测试:vue --version
      成功如下图:
      注意脚手架的版本不一定跟vue的版本一样。
      Vue环境搭建_第1张图片
      -这样配置的npm下载插件是国外的;可以访问cnpm:https://developer.aliyun.com/mirror/NPM?from=tnpm;这是淘宝提供的服务器。配置cnpm在CMD中的输入:npm install -g cnpm --registry=https://registry.npm.taobao.org
      使用:cnpm --version查看
      注:将npm的仓库地址改为淘宝镜像

    npm config set registry https://registry.npm.taobao.org --global

    npm config set disturl https://npm.taobao.org/dist --global
    ————————————————
    版权声明:本文为CSDN博主「Gixers」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/MyWoodStream/article/details/82585401

你可能感兴趣的:(vue.js,vue)