查看“Vue项目搭建”的源代码

== [[Vue环境搭建|'''环境搭建''']] ==
== '''项目搭建''' ==

=== 搭建已存在的项目 ===

==== 下载项目 ====
<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
[[文件:Webpack.png|缩略图|665x665px|无]]

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

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

==== 访问项目 ====
 访问 <nowiki>http://localhost:8081/</nowiki>
[[文件:Open.png|缩略图|666x666px|无]]
==== 项目所在位置 ====
[[文件:Position.png|缩略图|907x907px|无]]