创建Vue脚手架

目录

1.全局安装脚手架

设置淘宝镜像

 安装@vue/cli

 2.创建脚手架

3.运行项目

4.在Vue2项目中使用sass

(一)全局使用sass

(二)作用域使用sass


简介:vue脚手架是vue官方提供的标准化开发工具(开发平台),帮助开发者专门做工程化开发


1.全局安装脚手架

设置淘宝镜像

将npm地址配置成淘宝镜像,可以加快下载速度,不配置会导致下载速度极慢且可能下载失败

cmd执行如下命令即可:

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

 安装@vue/cli

设置淘宝镜像后cmd执行如下命令:

npm install -g @vue/cli

 2.创建脚手架

 切换到需要创建项目的目录,然后使用命令:

vue create xxx(项目名称)

使用上下剪头进行选项切换选择vue版本,可以使用上下剪头进行选项切换,选择号之后然后回车即可

3.运行项目

 在项目目录下执行如下命令:

npm run serve

 之后会输出两个url地址,分别是本地访问地址和远程访问地址

4.在Vue2项目中使用sass

Vue2提供了Sass的内置支持,在Vue2中使用Sass有两种方法: 

(一)全局使用sass

要在Vue2中全局使用Sass,需要安装node-sasssass-loader包,安装前需要确定版本号,默认安装的版本号是最新的,支持的webpack版本也是最新的,而vue2考虑稳定性使用的不是最新版本的webpack,所以安装最新版本的sass-loader可能会出现问题,可以使用如下命令查看sass-loader的历史版本号:

npm view sass-loader versions

 之后选择比最新版本号旧两个大版本的版本号安装即可:

npm install sass-loader @x(版本号)

(二)作用域使用sass

还可以通过将以下代码添加到组件中,在Vue2中按照组件使用Sass:




                    
                    

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