1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 从零开始 创建一个VUE项目 详细图文详解。

从零开始 创建一个VUE项目 详细图文详解。

时间:2021-05-12 15:58:34

相关推荐

从零开始 创建一个VUE项目 详细图文详解。

准备工作

1、安装VScode 点击下载2、安装node 点击下载3、安装npm 点击下载

一、步骤详解

1、创建项目的文件夹。比如F盘下新建一个名为MyDemo的文件夹,打开VScode进入MyDemo文件夹。

2、安装脚手架。输入npm install -g vue-cli 命令,回车。(-g 代表全局安装,下次新建项目就不用安装脚手架了)

3、新建一个项目。输入vue init webpack mydemo, mydemo 是自定义的项目名称,注意不能有大写字母,回车。

在安装时会询问你:

①Project name (mydemo);

【项目名称(mydemo),可以直接按回车,也可以自定义,注意不能有大写字母】(这个名字就是运行时,浏览器标题栏显示的名字!)

② Project description (A Vue.js project);

【项目描述(一个vue.js项目),可以直接按回车,也可以自定义】

③Author (xzb);

【项目作者(xzb),可以直接按回车,也可以自定义】

④Vue build (Use arrow keys)>

Runtime + Compiler: recommended for most users(大多数用户推荐)
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere;

【不知道啥意思,默认选自第一项,直接回车】

⑤Install vue-router? (Y/n);

【问是否安装路由? 可安可不安,建议安装,输入y,按回车】

⑥Use ESLint to lint your code? (Y/n);

【问是否使用ESlint语法?不了解ESLint语法就不使用,输入n,按回车】

⑦Setup unit tests with Karma + Mocha? (Y/n);

【问是否设置单元测试?不设置,输入n,按回车】

⑧Setup e2e tests with Nightwatch? (Y/n);

【问是否和Nightwatch建立端到端的测试?不建立,输入n,按回车】

⑨Should we run npm install for you after the project has been created? (recommended) npm

【问是否要安装依赖?可安可不安,建议安装,输入y,按回车】

6、把刚才创建的项目mydemo添加到工作区,点击右下角的 + 号,在下拉列表中点击mydemo。

7、如果上面第⑨步没有安装依赖, 就在终端输入npm install 命令,回车。

命令运行完毕,打开package.json,找到start 查看运行项目的命令,一般都是npm run dev,也可以自定义。在终端中输入npm run dev命令,回车。

8、项目运行成功,按住Ctrl键,单击红色部分,就可以在浏览器打开 http://localhost:8080,看到欢迎页了~

常见问题

1、 修改项目名

打开package.json,把name的值改成你想要的项目名,然后删掉整个 node_modules 文件夹,重新运行npm install命令就好了。

2、修改运行端口

打开config文件夹下面的index.js,找到port,把值改成你电脑上没被占用的端口就好了。下面的aotuOpenBrowser是当你npm run dev之后是否自动打开游览器。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。