vue新建项目

133 阅读1分钟

该笔记建立在vue各个部分都安装完毕的情况下,谨慎参考.

1>.指定项目工作路径

文件路径中的文件名尽量不要用中文,空格,以及其他的通配符. 2>.通过命令行创建项目 使用管理员身份打开命令行窗口,跳转到项目目录下,npm install -g @vue/cli,该过程完成后,继续在目录下输入vue init webpack demo untitled1,接着开始创建项目,如下:

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

   vue-cli · Generated "demo".

(乱码了,小问题) 项目建立完毕之后,根据提示依次输入 cd demo npm run dev:

# Project initialization finished!
# ========================

To get started:

  cd demo
  npm run dev

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

如下所示:

D:\vue workplace\demo>npm run dev

> untitled1@1.0.0 dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

(node:15712) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
 13% building modules 25/27 modules 2 active ...x=0!D:\vue workplace\demo\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting

 DONE  Compiled successfully in 4080ms                                                                          13:45:23

 I  Your application is running here: http://localhost:8080

此处可知项目已经建立成功,接着打开ideal,找到项目建立的位置,打开该项目,接着配置编译环境:

image.png 点击edit configurations,跳出页面如下,下拉选择npm,自行设置(和默认的差不多),script要选择dev选项:

image.png 配置完毕,接着编写程序可进行编译