Vue 2.6.11、Vue-Cli 4.3.0 项目初见

工作一直是以后端为主,技术革新需要,小撸一下Vue

撸Vue之前,跳看了几集《前端 Vue.js  高仿饿了么外卖App》,于是上手联系

windows10 下推荐使用 nvm-windows 管理node,切换版本很方便;

安装vue-cli:  yarn global add @vue/cli 

D:\WebstormProjects\nuts-pilinuts>yarn global add @vue/cli
yarn global v1.22.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
error [email protected]: The engine "node" is incompatible with this module. Expected version ">= 10". Got "8.17.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/global for documentation about this command.

D:\WebstormProjects\nuts-pilinuts>

切换 10.20.1

D:\WebstormProjects\nuts-pilinuts>nvm list

    12.16.3
    10.20.1
  * 8.17.0 (Currently using 64-bit executable)

D:\WebstormProjects\nuts-pilinuts>nvm use 10.20.1
Now using node v10.20.1 (64-bit)

D:\WebstormProjects\nuts-pilinuts>

再次安装 

D:\WebstormProjects\nuts-pilinuts>yarn global add @vue/cli
yarn global v1.22.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "@vue/[email protected]" with binaries:
      - vue
Done in 6.53s.

D:\WebstormProjects\nuts-pilinuts>

使用 Vue-cli 初始化项目:

vue create nuts-pilinuts

Vue CLI v4.3.1
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features                                                                                                                                                                                                                                                                                                                 

项目生成输出: 

Vue CLI v4.3.1
✨  Creating project in D:\WebstormProjects\nuts-pilinuts.
�  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.0
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
                                                                                                                                                                                                                                                                                                          success Saved lockfile.
Done in 38.31s.
�  Invoking generators...
�  Installing additional dependencies...

yarn install v1.22.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
                                                                                                                                                     success Saved lockfile.
Done in 15.29s.
⚓  Running completion hooks...

�  Generating README.md...

�  Successfully created project nuts-pilinuts.
�  Get started with the following commands:

 $ cd nuts-pilinuts
 $ yarn serve


D:\WebstormProjects>     

使用 Webstorm打开:

Vue 2.6.11、Vue-Cli 4.3.0 项目初见_第1张图片

o_O!!!难道是打开方式不对,项目结构差太多了。看官方文档发现可以通过 vue ui 命令以图形化界面创建和管理项目,

再重新创建一次:

D:\WebstormProjects>vue ui
�  Starting GUI...
�  Ready on http://localhost:8000

Vue 2.6.11、Vue-Cli 4.3.0 项目初见_第2张图片

Vue 2.6.11、Vue-Cli 4.3.0 项目初见_第3张图片 Vue 2.6.11、Vue-Cli 4.3.0 项目初见_第4张图片

Vue 2.6.11、Vue-Cli 4.3.0 项目初见_第5张图片 Vue 2.6.11、Vue-Cli 4.3.0 项目初见_第6张图片

 Vue 2.6.11、Vue-Cli 4.3.0 项目初见_第7张图片

 

Vue 2.6.11、Vue-Cli 4.3.0 项目初见_第8张图片 直接可以启动项目

Vue 2.6.11、Vue-Cli 4.3.0 项目初见_第9张图片 Vue 2.6.11、Vue-Cli 4.3.0 项目初见_第10张图片

你可能感兴趣的:(Vue)