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

来自小能手俱乐部
跳到导航 跳到搜索
 
（未显示同一用户的16个中间版本）
第1行： 第1行：
== [[Vue环境搭建|'''vue环境搭建''']] ==
== [[Vue环境搭建|'''环境搭建''']] ==
== '''项目搭建''' ==
== '''项目搭建''' ==


=== '''安装webpack''' ===
=== 搭建已存在的项目 ===
npm install webpack –g


==== 下载项目 ====
<blockquote>
通过git/svn等途径拿到已存在项目放到自己想放的位置
</blockquote>


==== 安装依赖 ====
<blockquote>打开项目根目录下的readme.md文件里面会有最优安装依赖命令


=== '''安装vue脚手架（旧版本）''' ===
例如：npm install 或cnpm -install（需提前安装淘宝镜像如何安装请看环境搭建） 或yarn install（需提前安装yarn如何安装请看环境搭建）
npm install vue-cli -g


在根目录下执行以上命令即可安装项目依赖于node_modules


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


npm i -g @vue/cli-init
有时候使用以上命令时安装会报错，删除项目根目录下的node_modules目录重新换个命令执行</blockquote>


==== 项目运行 ====
<blockquote>根据安装依赖使用的命令对应执行项目运行命令


vue init webpack test_web
例如：npm run serve 或 cnpm run serve 或 yarn serve


'''注意'''


Cd test_web
有些项目运行的时dev 例如 npm run dev 这是vue版本的原因


Npm run dev
建议打开项目根目录下的readme.md文件里面会有最优运行命令或者打开根目录下package.json文件在scripts对像中有具体运行的内容</blockquote>


==== 访问项目 ====
<blockquote>运行成功后会生成访问地址，直接在浏览器访问即可</blockquote>


浏览器访问
=== 搭建新项目 ===


<nowiki>http://localhost:8080/</nowiki>
==== 安装webpack ====
npm install webpack –g
[[文件:Webpack.png|缩略图|665x665px|无]]


==== 安装vue脚手架 ====
npm install -g @vue/cli
[[文件:@vue-cli.png|缩略图|1339x1339px|无]]


'''4.安装vue脚手架（新版本）'''
==== 创建项目 ====
在你想要放置的目录下执行Vue create my_text
[[文件:My-text.png|缩略图|547x547像素|无]]
三种配置选择一种回车
[[文件:Enter.png|缩略图|853x853px|无]]
==== 启动项目 ====
<syntaxhighlight line="1">
cd my_test
npm run serve
</syntaxhighlight>[[文件:Run.png|缩略图|712x712px|无]]


npm install -g @vue/cli
==== 访问项目 ====
 
访问 <nowiki>http://localhost:8081/</nowiki>
 
[[文件:Open.png|缩略图|666x666px|无]]
Vue create my_text
==== 项目所在位置 ====
 
[[文件:Position.png|缩略图|907x907px|无]]
 
 
三种配置选择一种回车
 
 
Cd my_test
 
Npm run serve
 
 
 
访问 <nowiki>http://localhost:8081/</nowiki>
 
 
 
 
 
项目所在位置
 
 
 
参考资料
 
Node.js入门：<nowiki>http://www.runoob.com/nodejs/nodejs-tutorial.html</nowiki>
 
Npm命令：<nowiki>http://www.runoob.com/nodejs/nodejs-npm.html</nowiki>
 
Vue官网：<nowiki>https://cn.vuejs.org/</nowiki>
 
Vue CLI：<nowiki>https://cli.vuejs.org/zh/guide/</nowiki>
 
Es6常用语法：<nowiki>https://blog.csdn.net/itzhongzi/article/details/73330681</nowiki>
 
Element前端框架 <nowiki>https://element.faas.ele.me/#/zh-CN/component/installation</nowiki>

2021年12月14日 (二) 03:52的最新版本

环境搭建

项目搭建

搭建已存在的项目

下载项目

通过git/svn等途径拿到已存在项目放到自己想放的位置

安装依赖

打开项目根目录下的readme.md文件里面会有最优安装依赖命令

例如：npm install 或cnpm -install（需提前安装淘宝镜像如何安装请看环境搭建） 或yarn install（需提前安装yarn如何安装请看环境搭建）

在根目录下执行以上命令即可安装项目依赖于node_modules

注意

有时候使用以上命令时安装会报错，删除项目根目录下的node_modules目录重新换个命令执行

项目运行

根据安装依赖使用的命令对应执行项目运行命令

例如：npm run serve 或 cnpm run serve 或 yarn serve

注意

有些项目运行的时dev 例如 npm run dev 这是vue版本的原因

建议打开项目根目录下的readme.md文件里面会有最优运行命令或者打开根目录下package.json文件在scripts对像中有具体运行的内容

访问项目

运行成功后会生成访问地址，直接在浏览器访问即可

搭建新项目

安装webpack

npm install webpack –g
生成缩略图出错：无法找到文件

安装vue脚手架

npm install -g @vue/cli
生成缩略图出错：无法找到文件

创建项目

在你想要放置的目录下执行Vue create my_text
生成缩略图出错：无法找到文件
三种配置选择一种回车
生成缩略图出错：无法找到文件

启动项目

cd my_test
npm run serve
生成缩略图出错：无法找到文件

访问项目

访问 http://localhost:8081/
生成缩略图出错：无法找到文件

项目所在位置

生成缩略图出错：无法找到文件
取自“http://123.56.229.83:8088/mediawiki/index.php?title=Vue项目搭建&oldid=702”