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的版本一样。
-这样配置的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