“Vue项目搭建”的版本间的差异
跳到导航
跳到搜索
（→项目已存在） |
|||
| （未显示同一用户的6个中间版本） | |||
| 第1行： | 第1行： | ||
== [[Vue环境搭建|''' | == [[Vue环境搭建|'''环境搭建''']] == | ||
== ''' | == '''项目搭建''' == | ||
=== 安装webpack === | === 搭建已存在的项目 === | ||
==== 下载项目 ==== | |||
<blockquote> | |||
通过git/svn等途径拿到已存在项目放到自己想放的位置 | |||
</blockquote> | |||
==== 安装依赖 ==== | |||
<blockquote>打开项目根目录下的readme.md文件里面会有最优安装依赖命令 | |||
例如：npm install 或cnpm -install（需提前安装淘宝镜像如何安装请看环境搭建） 或yarn install（需提前安装yarn如何安装请看环境搭建） | |||
在根目录下执行以上命令即可安装项目依赖于node_modules | |||
'''注意''' | |||
有时候使用以上命令时安装会报错，删除项目根目录下的node_modules目录重新换个命令执行</blockquote> | |||
==== 项目运行 ==== | |||
<blockquote>根据安装依赖使用的命令对应执行项目运行命令 | |||
例如：npm run serve 或 cnpm run serve 或 yarn serve | |||
'''注意''' | |||
有些项目运行的时dev 例如 npm run dev 这是vue版本的原因 | |||
建议打开项目根目录下的readme.md文件里面会有最优运行命令或者打开根目录下package.json文件在scripts对像中有具体运行的内容</blockquote> | |||
==== 访问项目 ==== | |||
<blockquote>运行成功后会生成访问地址，直接在浏览器访问即可</blockquote> | |||
=== 搭建新项目 === | |||
==== 安装webpack ==== | |||
npm install webpack –g | npm install webpack –g | ||
[[文件:Webpack.png|缩略图|665x665px|无]] | [[文件:Webpack.png|缩略图|665x665px|无]] | ||
=== | ==== 安装vue脚手架 ==== | ||
npm install -g @vue/cli | npm install -g @vue/cli | ||
[[文件:@vue-cli.png|缩略图|1339x1339px|无]] | [[文件:@vue-cli.png|缩略图|1339x1339px|无]] | ||
=== | ==== 创建项目 ==== | ||
在你想要放置的目录下执行Vue create my_text | 在你想要放置的目录下执行Vue create my_text | ||
[[文件:My-text.png|缩略图|547x547像素|无]] | [[文件:My-text.png|缩略图|547x547像素|无]] | ||
三种配置选择一种回车 | 三种配置选择一种回车 | ||
[[文件:Enter.png|缩略图|853x853px|无]] | [[文件:Enter.png|缩略图|853x853px|无]] | ||
=== 启动项目 === | ==== 启动项目 ==== | ||
<syntaxhighlight line="1"> | <syntaxhighlight line="1"> | ||
cd my_test | cd my_test | ||
| 第21行： | 第55行： | ||
</syntaxhighlight>[[文件:Run.png|缩略图|712x712px|无]] | </syntaxhighlight>[[文件:Run.png|缩略图|712x712px|无]] | ||
=== | ==== 访问项目 ==== | ||
访问 <nowiki>http://localhost:8081/</nowiki> | 访问 <nowiki>http://localhost:8081/</nowiki> | ||
[[文件:Open.png|缩略图|666x666px|无]] | [[文件:Open.png|缩略图|666x666px|无]] | ||
=== 项目所在位置 === | ==== 项目所在位置 ==== | ||
[[文件:Position.png|缩略图|907x907px|无]] | [[文件:Position.png|缩略图|907x907px|无]] | ||
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/
