“Vue项目搭建”的版本间的差异

来自小能手俱乐部
跳到导航 跳到搜索
第1行: 第1行:
== [[Vue环境搭建|'''vue环境搭建''']] ==
== [[Vue环境搭建|'''vue环境搭建''']] ==
== '''项目搭建''' ==
== '''vue项目搭建''' ==


=== '''安装webpack''' ===
=== '''安装webpack''' ===
第7行: 第7行:




=== '''安装vue脚手架(旧版本)''' ===
npm install vue-cli -g


[[文件:Webpack.png|缩略图|642x642像素]]


Vue CLI >= 3 和旧版使用了相同的 <code>vue</code> 命令,所以 Vue CLI 2 (<code>vue-cli</code>) 被覆盖了。如果你仍然需要使用旧版本的 <code>vue init</code> 功能,你可以全局安装一个桥接工具:


npm i -g @vue/cli-init




vue init webpack test_web




Cd test_web


Npm run dev




浏览器访问
=== '''安装vue脚手架''' ===
 
<nowiki>http://localhost:8080/</nowiki>
 
 
'''4.安装vue脚手架(新版本)'''
 
npm install -g @vue/cli
npm install -g @vue/cli


=== 创建vue新项目 ===
Vue create my_text


Vue create my_text






三种配置选择一种回车
三种配置选择一种回车




第45行: 第35行:
Npm run serve
Npm run serve


访问 <nowiki>http://localhost:8081/</nowiki>


访问 <nowiki>http://localhost:8081/</nowiki>





2021年11月12日 (五) 07:14的版本

vue环境搭建

vue项目搭建

安装webpack

npm install webpack –g



生成缩略图出错:无法找到文件





安装vue脚手架

npm install -g @vue/cli

创建vue新项目

Vue create my_text



三种配置选择一种回车


Cd my_test

Npm run serve

访问 http://localhost:8081/




项目所在位置


参考资料

Node.js入门:http://www.runoob.com/nodejs/nodejs-tutorial.html

Npm命令:http://www.runoob.com/nodejs/nodejs-npm.html

Vue官网:https://cn.vuejs.org/

Vue CLI:https://cli.vuejs.org/zh/guide/

Es6常用语法:https://blog.csdn.net/itzhongzi/article/details/73330681

Element前端框架 https://element.faas.ele.me/#/zh-CN/component/installation