首页 技术JS正文

vue2.0搭建vue脚手架

薄洪涛 JS 2019-05-28 5116 0 vue

最近有个项目,老大评估后想用前后端分离技术来做,借这个机会来熟悉下vue前端框架,这次就搭建一个vue项目,下一个目标就是把vue和yii2.0整合;

开搞

  1. 搭建node环境

    这步很简单,下载安装包右键安装就可以了

       这样就算安装成功了

C:\Windows\system32>node --version
v12.3.1
C:\Windows\system32>npm --version
6.9.0

另外,node有个包管理工具,类似python的pip,如果你嫌下载速度慢的话,可以切换到国内的淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

这样你就可以使用cnpm代替npm了(但是我可以连外网FW,所以我还是用npm)

 2. 搭建vue-cli

npm install vue-cli -g

3. 建立项目

cd到某个文件夹,运行以下命令,vue-demo就是你项目的名字,然后一路 enter

vue init webpack vue-demo

这段时间比较长,除了需要安装vue-router之外,其他都为no

分别是:是否需要用js语法规范去检查你的代码|?是否需要安装test测试单元?是否需要建立端对端测试工具?然后选择npm install回车就可以了

E:\git\vue-framework>vue init webpack vue-demo

'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
? Project name vue-demo
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "vue-demo".


# Installing project dependencies ...
# ========================

npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated flatten@1.0.2: I wrote this module a very long time ago; you should use something else.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
.
.
.
.
# Project initialization finished!
# ========================

To get started:

  cd vue-demo
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

漫长的等待后,我们cd到项目目录,装完了,我们进入到项目目录

cd vue-demo

执行如下命令

npm install

这样就说明你成功了

E:\git\vue-framework\vue-demo>npm install
npm WARN rollback Rolling back node-pre-gyp@0.12.0 failed (this is probably harmless): EPERM: operation not permitted, lstat 'E:\git\vue-framework\vue-demo\node_modules\fsevents\node_modules'
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

audited 11512 packages in 12.202s
found 12 vulnerabilities (7 moderate, 5 high)
  run `npm audit fix` to fix them, or `npm audit` for details

我们启动项目

npm run dev
提示已经在8080端口runing了,打开浏览器访问下就好了
Your application is running here:  
[object Object]

image.png

现在我们就搭建好了一个vue项目

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论