vue两种安装配置方法
新建vue单页面应用
一共有两种方式:
-
vue/cli
-
vite
2.vue/cli方法
vue/cli是基于webpack
npm install -g @vue/cli
这样就可以在全局安装vue/cli,输入命令,查看安装是否成功
vue --version
#or
vue -V
能出现对应的vue/cli的版本,即为安装成功。
在这一步过程中,很可能会出错,出错率10%左右,如果安装明明成功了,但是无法显示版本号,并且提示vue not ...command
,则为环境变量需要配置。
npm list -g
查看全局环境下,包安装路径,复制其,配置电脑的环境变量,重启cmd即可。
vue/cli安装成功后,即可新建项目
使用vue/cli
新建项目有两种方式
命令行新建
vue create 文件名
下键选择M 回车
下键到L 按空格取消 回车
(y/n)n
cd w
npm run serve/npm run build
中间经过若干步骤,按需导入使用。
O Babel 把es6等高端代码转成低端代码,供低版本浏览器使用
O TypeScript TS微软新出的一门语言,可以用来生成js
o Progressive Web App (PWA) Support 移动端app支持
o Router 路由
o Vuex 一种统一状态管理工具(存数据的)
o CSS Pre-processors css预处理器支持(可以用来把less等高端css语言转成普通css)
• Linter / Formatter (代码风格)
o Unit Testing 测试
O E2E Testing 测试
2.vite方法
(按需加载,不用刷新)
不基于webpack,速度更快,体积更小,仅支持vue3.x,不支持2.x.
npm init vite-app 文件名
cd 文件名
npm i
npm run dev
如果报错:
Need to install the following packages:
create-vite-app
Ok to proceed? (y)
输入y进行安装create-vite-app
即可。