vue用npm提示编译错误_2020最新vue项目搭建详解|小白必看山西软通乐学常亮

山西软通乐学常亮&＃xff1a;下面由我给大家详解详细讲解vue项目搭建步骤

第一步&＃xff1a;安装node&＃xff08;11版本自带npm工具&＃xff09;

在node.js官网下载

安装好查看命令

node -v 查看电脑安装node版本

npm -v 查看电脑安装npm版本

第二步&＃xff1a;安装cnpm&＃xff08;国内管理工具&＃xff09;与npm的区别就是下载速度快

npm install cnpm -g --registry&＃61;https://registry.npm.taobao.org

cnpm -v 查看电脑安装cnpm版本

第三步&＃xff1a;安装vue项目框架&＃xff08;脚手架搭建&＃xff09;

npm install -g &＃64;vue/cli

vue --version 查看电脑安装vue框架版本

第四步&＃xff1a;创建vue项目工程

[if !supportLists]1. [endif]vue create 项目名 &＃xff08;命令行创建&＃xff09;

选择Manually select features&＃xff08;手动选择功能&＃xff09;要自定义安装哪些功能和配置

Check the features needed for your project: &＃xff08;检查项目所需的功能&＃xff09;

咱们这里需要到的功能有babel&＃xff08;Javascript编译器&＃xff09;、 router&＃xff08;路由&＃xff09;、vuex&＃xff08;状态管理模式&＃xff09;、css pre-processors&＃xff08;CSS预处理器&＃xff09;。

空格选择

babel&＃xff08;Javascript编译器&＃xff09;&＃xff1a;利用babel就可以让我们在当前的项目中随意的使用这些新最新的es6&＃xff0c;甚至es7的语法。说白了就是把各种Javascript千奇百怪的语言统统专为浏览器可以认识的语言。

router&＃xff08;路由&＃xff09;&＃xff1a;ue-router是vue.js官方路由管理器。vue的单页应用是基于路由和组件的&＃xff0c;路由用于设定访问路径&＃xff0c;并将路径和组件映射起来。&＃xff08;传统页面切换是用超链接a标签进行切换&＃xff09;。

css pre-processors&＃xff08;CSS预处理器&＃xff09;&＃xff1a;预处理器&＃xff1a;比如要用sass或者cssNext就要按照人家规定的语法形式&＃xff0c;就是用人家的语法去编写&＃xff0c;然后人家把你编写的代码转成css。

回车

路由器是否使用历史模式

选择一个CSS预处理器

您更喜欢将你选择的功能等配置文件放在哪里&＃xff1f;选择第一个单独的每个文件夹

是否将其保存为将来项目的预设&＃xff1f;

重重敲击回车等待项目安装成功。。。

安装成功项目结构

最后一步进入创建好的项目输入命令 npm run serve

创建成功点击链接访问项目

vue ui 可视化创建 &＃xff08;可视化图形界面创建&＃xff09;

第一步&＃xff1a;命令vue ui 生成一个地址

第二步&＃xff1a;点击生成的地址进入可视化界面

第三步&＃xff1a;点击创建

第四步&＃xff1a;点击在此创建新项目

第五步&＃xff1a;点击下一步选择手动

第六步&＃xff1a;选择需要安装的功能

第七步&＃xff1a;选择是否使用历史路由和CSS预处理器

第八步&＃xff1a;选择取消保存预设等待创建项目

最后一步&＃xff1a;点击任务点击serve 点击运行 这个项目就跑起来了