好久没写笔记了,可能是人懒了吧,今天写一个脚手架搭建vue项目的流程。(不过网上一搜一大堆,写下来主要是最近比较闲,复习一下吧)
一、确保电脑有node.js
1.官网下载地址、如果不太熟点我可以看菜鸟的步骤流程。
2.CMD打开命令窗口,输入:node -v。全拼:node --version。如果出现版本号就是安装完成。
3.后续会有一些npm的操作,但npm下载可能出现缓慢的情况,所以我们用cnpm吧。(PS:npm的服务器是在国外的,可能会出现下载缓慢的情况,这时候就得感谢我们的马先生建立的阿里巴巴了,阿里巴巴的淘宝团队把npm官网的插件全部同步到了中国的服务器并提供给广大国内码农使用,太赞了。)
命令窗口输入:npm install cnpm -g --registry=https://registry.npm.taobao.org
4.下载好了输入:cnpm -v 查验版本号。后续使用cnpm 代替npm(视情况选择)
二、搭建vue项目
- 把终端设定到想建项目的路径输入:npm install -g vue-cli 或 cnpm install -g vue-cli
- 在终端输入:vue init webpack “XXXX” 注意XXXX是你项目的名称,不需要加引号,如: vue init webpack vue2-test
? Project name vue2-test //设置项目名称
? Project description 用於練習的項目 //设置项目描述
? Author XXXxx //设置项目作者,如果vscode登录了,会默认以登陆者为作者,未登录就指向window用户名
// 以上三个可以后配置文件中修改,所以影响不是很大
? Vue build standalone // 打包的方式,直接回车即可
? Install vue-router? Yes // 是否安装路由router 输入y y=yes,也可以自己安装
? Use ESLint to lint your code? No
// ↑是否需要语法检测,比如一个分号未加就报错那种,有些公司项目比较严谨,根据需求来 我大多是No
? Set up unit tests No //是否安装单元测试工具,我自己是用不上的(可能太菜了吧) 所以No
? Setup e2e tests with Nightwatch? No // 需不需要 端到端测试工具 我也用不上,所以No了
? Should we run `npm install` for you after the project has been created? (recommended) npm
// ↑ 这个可以选npm 也就是使用npm运行以上配置建立vue项目
// ↑ 可以直接回车,也可以选第三个 然后自己去cnpm inistall
直接回车或者自行cnpm的 等待搭建完成即可,会在你指定的路径出现以下文件
在config文件夹里的index.js 将aotuOpenBrowser的键设为true,可以自动运行默认浏览器
最后找到这个“vue2-test”,vscode右键集成终端打开 npm run dev 即可运行。
到此我们的vue2项目已经搭建好,不过现在好多都是用vue3了,无非是命令大同小异,原理都是一样