WebStorm 创建一个Vue项目
一、下载并安装WebStorm步骤一
https://i-blog.csdnimg.cn/blog_migrate/d83518aca41abe3ee24629137f585622.png
https://i-blog.csdnimg.cn/blog_migrate/5d713eca3f769e9d830388da531b0747.png
https://i-blog.csdnimg.cn/blog_migrate/ddfc20a61db9a8aeaea75fc4734f827f.png
https://i-blog.csdnimg.cn/blog_migrate/588db137d5bfb9365783061fd5750ff7.png
https://i-blog.csdnimg.cn/blog_migrate/59dcd7de596285fbbdb6c89842a835d4.png
步骤二
选择激活方式
https://i-blog.csdnimg.cn/blog_migrate/1167b6fa732bad2b87d49bad5b8773f1.png激活码：
I2A0QUY8VU-eyJsaWNlbnNlSWQiOiJJMkEwUVVZOFZVIiwibGljZW5zZWVOYW1lIjoiVU5JVkVSU0lEQURFIEVTVEFEVUFMIERFIENBTVBJTkFTIiwiYXNzaWduZWVOYW1lIjoiVGFvYmFv77yaSkVU5YWo5a625qG25r+AIOa0u+W3peS9nOWupCAgcmVuIHpodW4gZGlhbiBtaW5n77yBIiwiYXNzaWduZWVFbWFpbCI6IlJvYmJ5X1dlbmlnZXJAb3V0bG9vay5jb20iLCJsaWNlbnNlUmVzdHJpY3Rpb24iOiJGb3IgZWR1Y2F0aW9uYWwgdXNlIG9ubHkiLCJjaGVja0NvbmN1cnJlbnRVc2UiOmZhbHNlLCJwcm9kdWN0cyI6W3siY29kZSI6IkRQTiIsInBhaWRVcFRvIjoiMjAyNC0xMC0xNCIsImV4dGVuZGVkIjpmYWxzZX0seyJjb2RlIjoiREIiLCJwYWlkVXBUbyI6IjIwMjQtMTAtMTQiLCJleHRlbmRlZCI6ZmFsc2V9LHsiY29kZSI6IlBTIiwicGFpZFVwVG8iOiIyMDI0LTEwLTE0IiwiZXh0ZW5kZWQiOmZhbHNlfSx7ImNvZGUiOiJJSSIsInBhaWRVcFRvIjoiMjAyNC0xMC0xNCIsImV4dGVuZGVkIjpmYWxzZX0seyJjb2RlIjoiUlNDIiwicGFpZFVwVG8iOiIyMDI0LTEwLTE0IiwiZXh0ZW5kZWQiOnRydWV9LHsiY29kZSI6IkdPIiwicGFpZFVwVG8iOiIyMDI0LTEwLTE0IiwiZXh0ZW5kZWQiOmZhbHNlfSx7ImNvZGUiOiJETSIsInBhaWRVcFRvIjoiMjAyNC0xMC0xNCIsImV4dGVuZGVkIjpmYWxzZX0seyJjb2RlIjoiUlNGIiwicGFpZFVwVG8iOiIyMDI0LTEwLTE0IiwiZXh0ZW5kZWQiOnRydWV9LHsiY29kZSI6IkRTIiwicGFpZFVwVG8iOiIyMDI0LTEwLTE0IiwiZXh0ZW5kZWQiOmZhbHNlfSx7ImNvZGUiOiJQQyIsInBhaWRVcFRvIjoiMjAyNC0xMC0xNCIsImV4dGVuZGVkIjpmYWxzZX0seyJjb2RlIjoiUkMiLCJwYWlkVXBUbyI6IjIwMjQtMTAtMTQiLCJleHRlbmRlZCI6ZmFsc2V9LHsiY29kZSI6IkNMIiwicGFpZFVwVG8iOiIyMDI0LTEwLTE0IiwiZXh0ZW5kZWQiOmZhbHNlfSx7ImNvZGUiOiJXUyIsInBhaWRVcFRvIjoiMjAyNC0xMC0xNCIsImV4dGVuZGVkIjpmYWxzZX0seyJjb2RlIjoiUkQiLCJwYWlkVXBUbyI6IjIwMjQtMTAtMTQiLCJleHRlbmRlZCI6ZmFsc2V9LHsiY29kZSI6IlJTMCIsInBhaWRVcFRvIjoiMjAyNC0xMC0xNCIsImV4dGVuZGVkIjpmYWxzZX0seyJjb2RlIjoiUk0iLCJwYWlkVXBUbyI6IjIwMjQtMTAtMTQiLCJleHRlbmRlZCI6ZmFsc2V9LHsiY29kZSI6IlJTViIsInBhaWRVcFRvIjoiMjAyNC0xMC0xNCIsImV4dGVuZGVkIjp0cnVlfSx7ImNvZGUiOiJEQyIsInBhaWRVcFRvIjoiMjAyNC0xMC0xNCIsImV4dGVuZGVkIjpmYWxzZX0seyJjb2RlIjoiUlNVIiwicGFpZFVwVG8iOiIyMDI0LTEwLTE0IiwiZXh0ZW5kZWQiOmZhbHNlfSx7ImNvZGUiOiJEUCIsInBhaWRVcFRvIjoiMjAyNC0xMC0xNCIsImV4dGVuZGVkIjp0cnVlfSx7ImNvZGUiOiJQREIiLCJwYWlkVXBUbyI6IjIwMjQtMTAtMTQiLCJleHRlbmRlZCI6dHJ1ZX0seyJjb2RlIjoiUFNJIiwicGFpZFVwVG8iOiIyMDI0LTEwLTE0IiwiZXh0ZW5kZWQiOnRydWV9LHsiY29kZSI6IlBDV01QIiwicGFpZFVwVG8iOiIyMDI0LTEwLTE0IiwiZXh0ZW5kZWQiOnRydWV9LHsiY29kZSI6IlJTIiwicGFpZFVwVG8iOiIyMDI0LTEwLTE0IiwiZXh0ZW5kZWQiOnRydWV9XSwibWV0YWRhdGEiOiIwMTIwMjMxMDE4TFBBQTAwMjAwOSIsImhhc2giOiI1MDY4MjM4OC8yNDQxMzAzMDotMjMxNDI0MDkzIiwiZ3JhY2VQZXJpb2REYXlzIjo3LCJhdXRvUHJvbG9uZ2F0ZWQiOmZhbHNlLCJpc0F1dG9Qcm9sb25nYXRlZCI6ZmFsc2V9-TVABo8WPqQXMBwop9hR4Jao5zPeU6ZWd/B4k0rUtT8YptqYZ0qcyA1w928ovkigORlHy4uIHKc75EmfkDc7V8jLUEyysKr3XGrJe/0ghkGtqTUaZ47SWiqm6TCR21PG2CtfByT0jZjw6AspsWqwyGmFeZAKfXkuAzmJ6psJOeZvaFn4qzzkjzCDdOGOdUXPEPdkG1t4a+rxgt4Ly06yEcpFpy87mx5SO/F9sus2/ZHnVCISqRQBil8hvYsQKP9TScHjyGe6I9KhRofs2SuUHe3+Wh5cSTQH4wy6mJZP+7ImX76BnOqjPWOh4sJwUJ+I+IfjOV4iG5bu25YNV9DF2eA==-MIIETDCCAjSgAwIBAgIBDzANBgkqhkiG9w0BAQsFADAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBMB4XDTIyMTAxMDE2MDU0NFoXDTI0MTAxMTE2MDU0NFowHzEdMBsGA1UEAwwUcHJvZDJ5LWZyb20tMjAyMjEwMTAwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQC/W3uCpU5M2y48rUR/3fFR6y4xj1nOm3rIuGp2brELVGzdgK2BezjnDXpAxVDw5657hBkAUMoyByiDs2MgmVi9IcqdAwpk988/Daaajq9xuU1of59jH9eQ9c3BmsEtdA4boN3VpenYKATwmpKYkJKVc07ZKoXL6kSyZuF7Jq7HoQZcclChbF75QJPGbri3cw9vDk/e46kuzfwpGftvl6+vKibpInO6Dv0ocwImDbOutyZC7E+BwpEm1TJZW4XovMBegHhWC04cJvpH1u98xoR94ichw0jKhdppywARe43rGU96163RckIuFmFDQKZV9SMUrwpQFu4Z2D5yTNqnlLRfAgMBAAGjgZkwgZYwCQYDVR0TBAIwADAdBgNVHQ4EFgQU5FZqQ4gnVc+inIeZF+o3ID+VhcEwSAYDVR0jBEEwP4AUo562SGdCEjZBvW3gubSgUouX8bOhHKQaMBgxFjAUBgNVBAMMDUpldFByb2ZpbGUgQ0GCCQDSbLGDsoN54TATBgNVHSUEDDAKBggrBgEFBQcDATALBgNVHQ8EBAMCBaAwDQYJKoZIhvcNAQELBQADggIBANLG1anEKid4W87vQkqWaQTkRtFKJ2GFtBeMhvLhIyM6Cg3FdQnMZr0qr9mlV0w289pf/+M14J7S7SgsfwxMJvFbw9gZlwHvhBl24N349GuthshGO9P9eKmNPgyTJzTtw6FedXrrHV99nC7spaY84e+DqfHGYOzMJDrg8xHDYLLHk5Q2z5TlrztXMbtLhjPKrc2+ZajFFshgE5eowfkutSYxeX8uA5czFNT1ZxmDwX1KIelbqhh6XkMQFJui8v8Eo396/sN3RAQSfvBd7Syhch2vlaMP4FAB11AlMKO2x/1hoKiHBU3oU3OKRTfoUTfy1uH3T+t03k1Qkr0dqgHLxiv6QU5WrarR9tx/dapqbsSmrYapmJ7S5+ghc4FTWxXJB1cjJRh3X+gwJIHjOVW+5ZVqXTG2s2Jwi2daDt6XYeigxgL2SlQpeL5kvXNCcuSJurJVcRZFYUkzVv85XfDauqGxYqaehPcK2TzmcXOUWPfxQxLJd2TrqSiO+mseqqkNTb3ZDiYS/ZqdQoGYIUwJqXo+EDgqlmuWUhkWwCkyo4rtTZeAj+nP00v3n8JmXtO30Fip+lxpfsVR3tO1hk4Vi2kmVjXyRkW2G7D7WAVt+91ahFoSeRWlKyb4KcvGvwUaa43fWLem2hyI4di2pZdr3fcYJ3xvL5ejL3m14bKsfoOv
下一步(没截图),点右下角continue
步骤三
https://i-blog.csdnimg.cn/blog_migrate/c8b9a74d7c4c54d80d88392d448bfdb4.png选择框架：
https://i-blog.csdnimg.cn/blog_migrate/47fd4f1b6cd56ded2c7ddf708da3ff6f.png
二、创建Vue项目
创建Vue项目之前我们先了解一下Vue， Cors跨域， Axios， Nodejs和 elementUI 之间的关系
Vue.js、CORS（跨域资源共享）、Axios、Node.js和Element UI通常一起利用以构建现代Web应用步伐。下面分别解释它们之间的关系：
[*] Vue.js:
[*]Vue.js是一款现代的JavaScript框架，用于构建用户界面。它使开辟者能够轻松地构建交互性强、相应式的单页面应用（SPA）。
[*] CORS（跨域资源共享）:
[*]跨域资源共享是一种欣赏器技术，它答应Web页面从不同的域请求资源，即答应在一个域的Web应用步伐中利用另一个域的资源。这是由于欣赏器的同源计谋，为了安全原因，欣赏器通常不答应从一个域直接访问另一个域的资源。
[*] Axios:
[*]Axios是一个基于Promise的HTTP客户端，用于在欣赏器和Node.js中发起HTTP请求。在Vue.js中，Axios通常被用于与后端服务器举行通讯，获取或发送数据。
[*] Node.js:
[*]Node.js是一个基于Chrome V8引擎的JavaScript运行时，用于构建可扩展的网络应用步伐。在后端，Node.js通常用于创建服务器，处理HTTP请求，并与数据库举行交互。
[*] Element UI:
[*]Element UI是一个基于Vue.js的UI组件库，它提供了一套丰富的组件，可用于构建漂亮的用户界面。它包含诸如按钮、表格、表单等常用的UI组件。
关系如下：
[*]Vue.js与Axios： Vue.js通常与Axios一起利用，以便在Vue组件中发起HTTP请求，与后端举行数据交互。
[*]Axios与Node.js： Axios可以用于在Vue.js前端与Node.js后端之间举行HTTP通讯，获取或发送数据。
[*]CORS与Node.js： 在Node.js服务器中设置CORS是为了答应前端Vue应用步伐从不同的域请求数据。
[*]Element UI与Vue.js： Element UI是为Vue.js设计的，提供了一套易于利用的Vue组件，可以直接在Vue.js应用步伐中集成和利用。
这些技术和库之间协同工作以实现一个完整的Web应用步伐，此中Vue.js用于构建前端界面，Axios用于处理HTTP请求，Node.js用于构建后端服务，CORS用于办理跨域题目，而Element UI提供了一套现成的Vue组件，用于构建用户界面。
步骤一
下载Node.js
下载地点：Node.js (nodejs.org)
https://i-blog.csdnimg.cn/blog_migrate/5d82d21d326fd1339a2f3805152325ca.png
https://i-blog.csdnimg.cn/blog_migrate/f5059e682430f5e2d59af4244ba56cb5.png
https://i-blog.csdnimg.cn/blog_migrate/c936322e944317d3c950cfc98e37e43a.png
https://i-blog.csdnimg.cn/blog_migrate/6b3bf27ebce68623ff65f52f1224ed3e.png
https://i-blog.csdnimg.cn/blog_migrate/42194149e2b6a15efed7835dcfa5aaef.pnghttps://i-blog.csdnimg.cn/blog_migrate/cc450aae1e0f9a4bc21f48383913bfda.png
https://i-blog.csdnimg.cn/blog_migrate/50aeab2e8746649743950792f94e48b7.png
https://i-blog.csdnimg.cn/blog_migrate/fd5d49f25ddd7f892b17099cf82920b3.png
https://i-blog.csdnimg.cn/blog_migrate/9481fd842a3a157d0e52b679f151425c.png
测试是否安装乐成
https://i-blog.csdnimg.cn/blog_migrate/d53012d12432077d36a1485f65ed4464.png
安装目录下创建两个新文件夹 node_global 和 node_cache
https://i-blog.csdnimg.cn/blog_migrate/39c59177263355bc0a4a7070230d517b.png
管理员身份打开cmd命令窗口
1.win + R
https://i-blog.csdnimg.cn/blog_migrate/b967a8d5737b561dca98441b0966b6d1.png
2.Ctrl + Shift + Enter 进入下列界面
https://i-blog.csdnimg.cn/blog_migrate/ea4ece28569b8e3edb3b8cc14d97417e.png
输入以下命令：路径为两个新建文件夹node_global 和 node_cache的路径
npm config set prefix "D:develop
ode_global"
npm config set cache "D:develop
ode_cache"
https://i-blog.csdnimg.cn/blog_migrate/17525c2e37c1d1052d033194989f7403.png
上述命令运行结果：两个路径下各生成一个_logs文件夹
https://i-blog.csdnimg.cn/blog_migrate/2e5084de0a066e5617ae236ae10d832b.png
https://i-blog.csdnimg.cn/blog_migrate/2059636efd0475f633992f04e4c82619.png
设置环境变量
https://i-blog.csdnimg.cn/blog_migrate/c43d775d28cac4aa89e67f19db4a2352.png
https://i-blog.csdnimg.cn/blog_migrate/34d5272b0f53cb279f116245c456eaf9.png
上述操作后会在安装目录中该路径下创建 node_modules 文件夹，如果该文件夹没有创建需手动创建。
https://i-blog.csdnimg.cn/blog_migrate/0f8812c0933cfa9dfc824f7ffc4e8a37.png
https://i-blog.csdnimg.cn/blog_migrate/03f825e50caa91d902adc3c9e8128fc0.pnghttps://i-blog.csdnimg.cn/blog_migrate/b3bbb860363f3165e4f5920012e160e4.png
https://i-blog.csdnimg.cn/blog_migrate/54352d245641efeb799eeac596d9ac32.png
https://i-blog.csdnimg.cn/blog_migrate/790b1054a557b6c524dba8e58708a679.png
https://i-blog.csdnimg.cn/blog_migrate/ab2191246f57c15219a9976ad5c5fc5f.png
命令行窗口中举行命令测试：
npm install express -g
出现以下运行结果则安装乐成！
https://i-blog.csdnimg.cn/blog_migrate/b16c802b037b51d3183f803d24a25bdb.png更改npm远程仓库地点（利用淘宝npm远程镜像）：
npm config set registry https://registry.npm.taobao.org
https://i-blog.csdnimg.cn/blog_migrate/95d5b9bf4ba4a78b892e34b6405a6801.png命令行窗口中举行命令测试：
npm config get registry
出现以下运行结果则安装乐成！
https://i-blog.csdnimg.cn/blog_migrate/c163e851d937421f00404ee4070f612e.png
安装脚手架vue/cli （用于自动生成vue.js+webpack的项目模板）
#安装命令
npm install -g@vue/cli
#查看vue版本（大写V）
vue -V
出现以下运行结果则安装乐成！
https://i-blog.csdnimg.cn/blog_migrate/84d0714aa25a866594d61790abef15b6.png
步骤二
WebStrom创建helloword项目
管理员方式打开命令窗 -> 进入根目录(这里我创建的根目录文件夹为ws)
https://i-blog.csdnimg.cn/blog_migrate/47985b2608d95c86ee99779398f13ad3.png
创建vue项目 -> 选择自己需要的功能
npm create vue
https://i-blog.csdnimg.cn/blog_migrate/98da8b2b9912adbcf2dbfa4a8a307bbc.png
依次实验上述绿色指令将得到以下运行结果：
https://i-blog.csdnimg.cn/blog_migrate/7eaf5f95a7a4e761f16d0bc3a255d544.png
进入本地网址http://localhost:5174/
https://i-blog.csdnimg.cn/blog_migrate/7fc202fc88fbaf2c6fef1f8b92d0a38a.png
用WebStorm打开我们的项目：
https://i-blog.csdnimg.cn/blog_migrate/98be294997445582938c1b667eea5dec.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]