Vue | 项目搭建

182 阅读1分钟

环境搭建

Node.js是javascript运行环境

npm:Node.js下的包管理器

webpack:主要用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包

vue-cli:用户生成Vue工程模板

安装node.js

从node.js官网下载并安装node(一路下一步)。

安装完成后,在命令行中输入node -v查看当前版本

安装vue-cli脚手架构建工具

如果已经全局安装了旧版本,先通过npm uninstall vue-cli -g卸载它

在命令行中运行npm install -g @vue/cli 安装最新版本

通过vue --version查看安装好的版本

创建项目

vue create project-name创建vue项目

选择手动配置(图1)

图1

空格选择或取消,勾选的feature如图2

图2

按回车继续

router相关配置(图3)

图3

CSS pre-processor选择Sass/SCSS (with dart-sass)(图4)

图4 接下来按回车

图5 构建成功(图6)后,根据提示打开创建的项目,通过npm run serve启动构建的项目

图6

图7可以看出项目的本地地址,访问该地址可以看见搭建的项目

图7