一、介绍
vue式前端框架,是一套用于构建用户界面的渐进式框架
1、安装vue
安装node.js(配置环境变量)
https://nodejs.org/en/download/
更换镜像
npm config set registry https://registry.npm.taobao.org
查看镜像
npm config get registry
安装cnpm
npm install -g cnpm
配置cnpm镜像
cnpm config set registry http://registry.npm.taobao.org
安装vue脚手架
cnpm install -g @vue/cli
查看版本信息
vue --version
问题记录:
vue : 无法加载文件 D:node-v18.14.2-win-x64node_globalvue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com
/fwlink/?LinkID=135170 中的 about_Execution_Policies。
解决(修改命令行安全策略):
get-ExecutionPolicy
# 显示Restricted (禁用)
set-ExecutionPolicy RemoteSigned
get-ExecutionPolicy
#显示RemoteSigned
2、创建项目服务器托管网
(1)创建工程
# 项目名称中不可以有大写字母
vue create vue-demo
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
Default ([Vue 3] babel, eslint) 默认3的版本
Default ([Vue 2] babel, eslint) 默认2的版本
> Manually select features 手动选择
选择手动选择(使用上下切换,使用回车选择)
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press to select, to toggle all, to invert selection, and to proceed)
>(*) Babel
( ) TypeScript
(*) Progressive Web App (PWA) Support
( ) Router 路由(导航)
( ) Vuex 数据管理
( ) CSS Pre-processors
() Linter / Formatter 代码规范化(代码格式严格,取消勾选防止误报)
( ) Unit Testing
( ) E2E Testing
使用空格勾选
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press to select, to toggle all, to invert selection, and
? Check the features needed for your project: Babel, PWA
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
2.x
选择版本
Vue CLI v5.0.8
? Please pick a preset: Manually select服务器托管网 features
? Check the features needed for your project: (Press to select, to toggle all, to invert selection, and
? Check the features needed for your project: Babel, PWA
? Choose a version of Vue.js that you want to start the project with 3.x
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
配置存放位置
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press to select, to toggle all, to invert selection, and
? Check the features needed for your project: Babel, PWA
? Choose a version of Vue.js that you want to start the project with 3.x
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n
是否将选项设置为下次预设
Vue CLI v5.0.8
✨ Creating project in E:vsCodevuevue-demo.
⚙️ Installing CLI plugins. This might take a while...
added 968 packages in 3m
� Invoking generators...
� Installing additional dependencies...
added 18 packages in 2m
⚓ Running completion hooks...
� Generating README.md...
� Successfully created project vue-demo.
� Get started with the following command
$ cd vue-demo
$ npm run serve
已经创建成功
(2)运行项目
进入目录
cd vue-demo
执行项目
npm run serve
DONE Compiled successfully in 6817ms 22:09:17
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.8:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
成功运行
二、vscode安装插件
插件插件名称:Vue Language Features (Volar)
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
相关推荐: 11.15白盘黄金原油多空都已入袋,黄金晚间1973空单继续持有
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net 机房租用,北京机房租用,IDC机房托管, http://ww服务器托管网w.fwqt服务器托管网g.net相关推荐: C++ 核心指南之资源管理(下)—— 智能指针最佳实践C++…